Question

我有一个我正在创建的网站，并且有不同的div，每个都有自己的内容。所有这些都是隐藏的，除了显示在主页上的主要内容之外。过渡很长，我喜欢这样，但问题是，如果有人垃圾导航按钮，它会打开彼此顶部的所有div。因此，为了防止我想暂时禁用<a></a>元素的onClick。然后在转换完成后启用它。目前我可以禁用它，但无法找到重新启用它的方法。

    function disable(){
        $(".bar").unbind();
        $(".bar").removeAttr("onClick");
    }

我知道如何在一段时间后调用一个函数，但是什么是＆＃34; enable＆＃34;相当于这个函数中的代码？

Answer 1

完全相反的是将onClick设置回元素。

$('.bar').attr('onClick', function() { alert('blah'); });

或与vanilla js

document.querySelector(".bar")
        .setAttribute('onClick', function() {...});

但是，对于具有相同功能的许多元素来说，这很难管理。使用javascript（以及在这种情况下为jQuery）完全管理它会更容易。

function clickEvent(event) {
    var self = $(this);

    // Unbind the event
    self.off(clickEvent);

    // Click logic here

    // Rebind event
    self.on('click', clickEvent);
}

$('.bar').on('click', clickEvent);

Answer 2

您可以在动态div上添加额外的逻辑，而不是在DOM上禁用事件：

$('#mydiv').click(function() {
  if(!inTransition())
    // DO A THING
  else
    // DON'T DO A THING
});

作为旁注：如果您正在进行大量动态DOM操作，您可能需要考虑使用数据绑定框架，例如Angular或Knockout。 jQuery很适合简单的DOM操作，但如果你做了一些复杂的事情（听起来像你这样），它很快就会变得混乱和难以维护。

Answer 3

作为nmg49答案的某种延伸，我想提供一个更深入的解决方案。

基本上你要做的就是创建一个flag来确定你当前是否正在转换，如果它是真的则取消onClick（在转换完成后禁用它）。 / p>

var isTransitioning = false;
$('.bar').onClick(function(){
    if(isTransitioning) return;
    isTransitioning = true;
    // DO TRANSITION
});

转换完成后，您只需将isTransitioning设置为false（在回调中，或在onClick函数的末尾;哪一个适用于您的代码）。

这将确保无论他们点击按钮多少次，如果他们已经处于过渡状态，他们将无法转换。

禁用然后重新启用onClick（）

3 个答案: