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

Question

我在这里遇到了一些小问题，我把很多时间放在了与其功能相比相当差的地方。

我有标签在我的DOM，我已经结合几个事件对他们使用jQuery ..

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

有时候我想禁用某些元素，这意味着我添加CSS-类'禁用'它，我想删除所有事件，所以不再有任何事件触发。我创建了一个这里所说的“按钮”类来解决

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

我可以删除一个jQuery对象中的所有事件以$ .unbind。但我也想有相反的特征

button.enable() 

结合所有处理回元素 或 也许有jQuery的一项功能，实际上NOW的如何做到这一点的所有事件？

我的按钮类类似于这样的东西：

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

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

Answer 2

我会走在这条以不同的方法：

<a id="link1">Test function</a> 
<a id="link2">Disable/enable function</a> 

<script type="text/javascript"> 
    $(function() { 
     // this needs to be placed before function you want to control with disabled flag 
     $("#link1").click(function(event) { 
      console.log("Fired event 1"); 
      if ($(this).hasClass('disabled')) { 
       event.stopImmediatePropagation(); 
      } 
     }); 

     $("#link1").click(function() { 
      console.log("Fired event 2"); 
     }); 

     $("#link2").click(function() { 
      $("#link1").toggleClass("disabled"); 
     }); 
    }); 
</script> 

这可能不是您所需要的，因为它可能影响也将绑定此事件后来等功能。替代可以是修改的功能本身更像：

$("#link1").click(function(event) { 
    console.log("Fired event 1"); 
    if ($(this).hasClass('disabled')) { 
     return; 
    } 

    // do something here 
}); 

，如果这是一个选项。

Answer 3

$("a").click(function(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    return 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（）进行恢复。目前，没有万无一失的方法来获取元素上所有事件侦听器的列表;这会使工作变得更容易。

Answer 4

而是分别添加事件处理程序的每个元素的，你应该使用事件委托。它会变得更可管理的结构。

• http://www.sitepoint.com/javascript-event-delegation-is-easier-than-you-think/
• http://cherny.com/webdev/70/javascript-event-delegation-and-event-hanlders
• http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery

这为什么你可以只检查点击元素类（ES），并采取相应的行动。你甚至可以通过改变标签的类来重新排列它们。

P.S.仔细阅读链接，以便以后可以向其他人解释。事件代表团是一项非常重要的技术。