Question

我对已发布的以下问题进行了查询：＆＃34; jQuery click（）在删除.clickable类之后仍然被触发＆＃34;现在处于类似的情况，如果单击一个类调用一个函数，说一个滑块适用于动画，我们希望仅在函数执行时禁用单击，然后再次单击。我们怎么能这样做？

Answer 1

您可以在链接类中添加一个类=＆＃34;可点击＆＃34;。在点击功能中，执行以下操作：

$('#clickme').bind('click', function(e) {
    ...
    if( !$(this).hasClass('clickable') ) { return; }
    ...
    // the rest of line will get executable only if link has clickable class
});

在其他功能中，在需要时启用或禁用可点击：

$('#clickme').addClass('clickable');  // to make it clickable

or

$('#clickme').removeClass('clickable');  // to make it 'non-clickable'

Answer 2

如果您不关心IE，快速（又脏又？）解决方案是在要禁用所有附加事件的元素中添加pointer-events设置为无的类，然后随时删除该类。

它有一些缺点（例如一些逻辑放在css中）但我发现它非常方便。

小提琴（在IE中无法工作，仅在Chrome中测试过）：fiddle （我强迫SO在这里添加代码，因为我有一个小提琴链接）

<强> JS

function onClick(evt) {
     alert("clicked !");
     evt.target.classList.add("no-event");
     setTimeout(function() {
         evt.target.classList.remove("no-event");
        alert("you can click again !");
     }, 5000);
}

<强> CSS

.no-event {
    pointer-events : none;
}

Answer 3

假设滑块适用于动画，我们希望仅在功能执行时禁用点击，然后再次点击。

有几种方法，但如果你想使用滑块的情况，那么你可以这样使用它：

$('#next, #prev').on('click', function(){
     if($(this).hasClass('clicked')){ return;} 
     $(this).addClass('clicked');// add the class to stop any execution after if check above.
});

然后，当动画结束时，您必须从按钮中删除clicked类：

$('.slider').on('animationend', function(){
    $('.clicked').removeClass('clicked'); // remove the class to enable it.
});

如何让一个类不可点击，直到它执行一个函数然后再次点击它？

3 个答案: