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

前端之家收集整理的这篇文章主要介绍了javascript – 使用JS / jQuery启用/禁用DOM元素的事件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在这里遇到了一个小问题,我把相当多的时间与其功能相比非常糟糕.

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

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

有时我想禁用其中一些元素,这意味着我向它添加了一个css-Class’disabled’,我想删除所有事件,因此根本不会触发任何事件.我在这里创建了一个名为“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
– >我没有在按钮类中设置事件

感谢您的帮助.

解决方法

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

这不是完美的代码,但我相信你会得到基本的想法.调用enable时,从元素DOM数据中恢复旧的事件处理程序.缺点是你必须使用enable()来添加任何可能需要禁用的事件监听器()d.否则,事件处理程序将不会保存在DOM数据中,并且无法再次使用enable()进行恢复.目前,没有万无一失的方法获取元素上所有事件监听器的列表;这将使工作变得更容易.

原文链接:https://www.f2er.com/jquery/158428.html

猜你在找的jQuery相关文章