[英]How to make an element mouse unclickable but clickable through javascript?
I am using flip plug-in in jQuery which flips a given div.我在jQuery中使用翻转插件来翻转给定的 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 .我有几张图片,通过使用此功能,我试图创建一个 animation。我正在使用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:我尝试使用CSS属性:
body{pointer-events:none;}
this works but I am unable to disable this using jQuery after I am done with animation. I tried:这有效,但在完成animation 后,我无法使用 jQuery禁用它。我试过:
$('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.它也不起作用。
$('.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
}
});
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
}
});
It seems a bit of a hack to assign it to the click event, and then simulate a click, then unassign the click event.将其分配给点击事件,然后模拟点击,然后取消分配点击事件似乎有点 hack。 Why not just create a function which flips the element directly?
为什么不创建一个直接翻转元素的 function 呢?
var options = {...};
$(element).flip(options);
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)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.