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

Question

我在这里遇到了一个小问题,我已经花了很多时间,与其功能相比,这是非常糟糕的.

我的DOM中有标签,我用jQuery绑定了几个事件.

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

有时我想禁用其中一些元素,这意味着我将CSS-Class'禁用'添加到它中,我想删除所有事件,因此根本不会触发任何事件.我在这里创建了一个名为"Button"的类来解决这个问题

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

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

button.enable()

它将所有事件与所有处理程序绑定回元素或者jQuery中有一个功能实际上如何做到这一点？!

我的Button类看起来类似于:

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://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();
}

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

Answer 2

您可以使用 an<input type="button">然后使用$("#buttonID").addAttr('disabled', 'disabled');and $("#buttonID").removeAttr('disabled');。禁用和启用将由浏览器处理。如果需要，您仍然可以通过删除按钮的背景和边框来将其重新设计为看起来像锚点。但请注意，在某些浏览器中，某些边距和填充可能仍然会困扰您。