CODEWITHSUNDEEP
javascriptjqueryjquery-events
ghost-rider
ghost-rider

Reputation: 45

How to make an element mouse unclickable but clickable through javascript?

I am using flip plug-in in jQuery which flips a given div.

The code(reusing someone's code), flips an element after you click on it.

I have several images and by using this feature I am trying to create an animation. I am clicking these images using jQuery. However the problem is that even the user can click an image and again flip the image which I don't want.

I tried using CSS property:

body{pointer-events:none;}

this works but I am unable to disable this using jQuery after I am done with animation. I tried:

$('body').css('pointer-events','normal');

The code that I am reusing is:

$(document).ready(function() { /* The following code is executed once the DOM is loaded */


    $('.sponsorFlip').bind("click", function() {

        // $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):
        var elem = $(this);

        // data('flipped') is a flag we set when we flip the element:
        if (elem.data('flipped')) {
            // If the element has already been flipped, use the revertFlip method
            // defined by the plug-in to revert to the default state automatically:
            elem.revertFlip();

            // Unsetting the flag:
            elem.data('flipped', false)
        }
        else {
            // Using the flip method defined by the plugin:
            $(this).unbind("click");
            $(this).unbind("click");
            $(this).unbind("click");
            elem.flip({
                direction: 'lr',
                speed: 350,
                onBefore: function() {
                    // Insert the contents of the .sponsorData div (hidden from view with display:none)
                    // into the clicked .sponsorFlip div before the flipping animation starts:

                    elem.html(elem.siblings('.sponsorData').html());
                }
            });

            // Setting the flag:
            elem.data('flipped', true);


        }
    });

});

I tried by adding

$('.sponsorFlip').unbind("click");

It's also not working.

Upvotes: 3

Views: 1951

Answers (3)

skywlkr
skywlkr

Reputation: 1465

For a quick solution, just try to delete these lines: 

 // If the element has already been flipped, use the revertFlip method
        // defined by the plug-in to revert to the default state automatically:
        elem.revertFlip();

        // Unsetting the flag:
        elem.data('flipped', false)

Upvotes: 0

Dan Blows
Dan Blows

Reputation: 21174

It seems a bit of a hack to assign it to the click event, and then simulate a click, then unassign the click event. Why not just create a function which flips the element directly?

var options = {...};
$(element).flip(options);

Upvotes: 0

thecodeparadox
thecodeparadox

Reputation: 87073

$('.sponsorFlip').on('click', function(e) {
   // for a click event by mouse has e.clienX/e.clientY 
   if(e.clientX){
      // then click by mouse
   } else {
      // triggered 
   }
});

DEMO (see console)

for your code

$('.sponsorFlip').bind('click', function(e) {
   // for a click event by mouse has e.clienX/e.clientY 
   if(e.clientX){
      // then click by mouse
   } else {
      // triggered 
   }
});

DEMO (see console)

Upvotes: 3

Related Questions