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

Question

我在这里遇到了一个小问题，我已经投入了相当多的时间，与它的功能相比，这个问题非常糟糕。

我的 DOM 中有标签，我已经使用 jQuery 将几个事件绑定(bind)到它们。

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

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

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

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

button.enable()

将所有事件与所有处理程序绑定(bind)回元素要么也许 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
  }
}

有什么想法吗？特别是此重新绑定(bind)功能必须在禁用后可用 -> 启用

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

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

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

感谢您的帮助。

Answer 1

$("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();
}

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