使用JS/jQuery启用/禁用DOM元素的事件 [英] Enable/Disable events of DOM elements with JS / jQuery

问题描述

我在这里遇到了一个小问题，我花了很多时间，与它的功能相比，这是很糟糕的.

I stuck here with a little problem I have put pretty much time in which is pretty bad compared to its functionality.

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

I have tags in my DOM, and I have been binding several events to them with jQuery..

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

有时我想禁用其中的某些元素，这意味着我向其添加了禁用"的CSS类，并且希望删除所有事件，因此不再触发任何事件.我在这里创建了一个名为按钮"的类来解决该问题

Sometimes I would like to disable some of these elements, which means I add a CSS-Class 'disabled' to it and I'd like to remove all events, so no events are triggered at all anymore. I have created a class here called "Button" to solve that

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

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

I can remove all events from a jQuery object with $.unbind. But I would also like to have the opposite feature

button.enable()

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

which binds all events with all handlers back to the element OR maybe there is a feature in jQuery that actually nows how to do that?!

我的按钮类"看起来与此类似:

My Button Class looks something similar to this:

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
  }
}

有什么想法吗?特别是在禁用->启用

Any ideas? Especially this rebind functionality must be available after disable -> enable

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

我发现这些不适用于我的来源: http://jquery-howto.blogspot.com/2008/12/how-to-disableenable-element-with.html

I found these sources that did not work for me: http://jquery-howto.blogspot.com/2008/12/how-to-disableenable-element-with.html

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

http://forum.jquery.com/topic/jquery-temporarily-disabling-events -> I am not setting the events within the button class

感谢您的帮助.

推荐答案

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

返回false非常重要.

Returning false is very important.

或者您可以编写自己的启用和禁用功能，例如:

Or you could write your own enable and disable functions that do something like:

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()添加可能需要禁用(d)的任何事件侦听器.否则，事件处理程序将不会保存在DOM数据中，并且无法再次使用enable()恢复.当前，没有万无一失的方法来获取元素上所有事件侦听器的列表.这将使工作容易得多.

This isn't perfect code, but I'm sure you get the basic idea. Restore the old event handler from the element DOM data when calling enable. The downside is that you will have to use enable() to add any event listener that may need to be disable() d. Otherwise the event handler won't get saved in the DOM data and can't be restored with enable() again. Currently, there's no foolproof way to get a list of all event listeners on an element; this would make the job much easier.

这篇关于使用JS/jQuery启用/禁用DOM元素的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！