使用 JS / jQuery 启用/禁用 DOM 元素的事件

我遇到了一个小问题，我花了很多时间来解决这个问题，与它的功能相比，这个问题相当糟糕。

我的 DOM 中有标签，并且我已经使用 jQuery 将多个事件绑定到它们。

var a = $('<a>').click(data, function() { ... })

有时我想禁用其中一些元素，这意味着我向其添加“禁用”CSS 类，并且我想删除所有事件，这样就不再触发任何事件。我在这里创建了一个名为“Button”的类来解决这个问题

var button = new Button(a)
button.disable()

我可以使用 $.unbind 从 jQuery 对象中删除所有事件。但我也想要相反的功能

button.enable()

它将所有事件与所有处理程序绑定回元素 或者 也许 jQuery 中有一个功能实际上现在可以做到这一点？！

我的按钮类看起来与此类似：

Button = function(obj) {
  this.element = obj
  this.events = null

  this.enable = function() {
    this.element.removeClass('disabled')
    obj.data('events', this.events)
    return this
  }

  this.disable = function() {
    this.element.addClass('disabled')
    this.events = obj.data('events')
    return this
  }
}

有任何想法吗？特别是在禁用 -> 启用后，此重新绑定功能必须可用

var a = $('<a>').click(data, function() { ... })

我发现这些来源对我不起作用：http://jquery-howto.blogspot.com/2008/12/how-to-disableenable-element-with.html http://jquery-howto.blogspot.com/2008/12/how-to-disableenable-element-with.html

http://forum.jquery.com/topic/jquery-temporarily-disabling-events http://forum.jquery.com/topic/jquery-temporarily-disabling-events-> 我没有在按钮类中设置事件

感谢你的帮助。

$("a").click(function(event) {
    event.preventDefault(); 
    event.stopPropagation(); 
    return false;
});

返回 false 非常重要。

或者您可以编写自己的启用和禁用函数来执行以下操作：

function enable(element, event, eventHandler) {
    if(element.data()[event].eventHandler && !eventHandler) { //this is pseudo code to check for null and undefined, you should also perform type checking
        element.bind(event, element.data()[event]);

    }
    else (!element.data()[event] && eventHandler) {
        element.bind(event, element.data()[event]);
        element.data({event: eventHandler}); //We save the event handler for future enable() calls
    }
}

function disable(element, event) {
    element.unbind().die();
}

这不是完美的代码，但我相信您已经了解基本概念了。调用enable时从元素DOM数据恢复旧的事件处理程序。缺点是您必须使用enable()来添加可能需要disable()的任何事件侦听器。否则，事件处理程序将不会保存在 DOM 数据中，并且无法再次使用 enable() 恢复。目前，没有万无一失的方法来获取元素上所有事件侦听器的列表。这将使工作变得更加容易。