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

Question

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.

thecodeparadox · Accepted Answer · 2012-06-02 14:01:50Z

3

$('.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)

edited Jun 2, 2012 at 14:01

answered Jun 2, 2012 at 13:56

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dan Blows · Accepted Answer · 2012-06-02 14:15:35Z

0

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);

answered Jun 2, 2012 at 14:15

Dan Blows

21.2k10 gold badges68 silver badges99 bronze badges

Comments

skywlkr · Accepted Answer · 2012-06-02 14:29:35Z

0

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)

answered Jun 2, 2012 at 14:29

skywlkr

1,4551 gold badge13 silver badges22 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related