jQuery/Javascript 暂时禁用 addEventListener/attachEvent 附加的事件答案

【问题标题】：jQuery/Javascript temporarily disable events attached by addEventListener/attachEventjQuery/Javascript 暂时禁用 addEventListener/attachEvent 附加的事件
【发布时间】：2011-03-02 00:28:06
【问题描述】：

有没有办法暂时禁用事件监听器？

就我而言，我有一个第三方库（不是以 jQuery 为中心的），它使用 addEventListener/attachEvent 在元素上创建 mouseover/mouseout 事件强>。

在某些情况下，另一个事件会在不同的元素上触发，我需要禁用这些事件侦听器。到目前为止，我的解决方案是简单地unbind mouseover/mouseout。这通常可以正常工作，因为该事件通常会导致页面刷新。

但是，有时会出现导致页面不刷新的错误（想想验证错误），我需要重新附加 mouseover/mouseout 事件侦听器。

有用信息

可能值得一提的是，因为 mouseover/mouseout 事件侦听器是在第三方库中创建和附加的，所以我不能简单地将事件分配给一个变量并以这种方式绑定/取消绑定它（AFIK 是最好的方法这个）。

更新

我本来是问的

在 jQuery 中有没有办法获取已经分配给对象的事件监听器？

我后来发现无法访问由 addEventListener/attachEvent 分配的事件：Access events added with attachEvent() / addEventListener() in JavaScript

【问题讨论】：

标签： javascript jquery unbind

【解决方案1】：

jQuery 使用data 在内部存储事件，因此您可以使用它来获取对象的所有事件处理程序：

$("#foo").data("events")

然后您可以使用unbind 删除特定的处理程序：

$("#foo").unbind('click', $("#foo").data("events").click[42]);

【讨论】：

我可能应该提到，最初附加 mouseover/mouseout 事件侦听器的库不是 jQuery 插件，而是使用原生 addEventListener/attachEvent。
啊，好的。我的回答可能仍会帮助从谷歌到达的人，所以我会保留它。您是要禁用所有事件侦听器，还是仅禁用其中的一部分？
我正在尝试禁用特定的 mouseover 和 mouseout 事件。但是由于它们是元素上唯一的事件，因此从该元素中删除所有事件是安全的。使用unbind 很容易，但我需要保留对 then 的引用，以便在出现错误时重新绑定它们。然而，我需要的似乎是不可能的，请参阅：stackoverflow.com/questions/681120/…
您可以尝试使用cloneNode 创建没有事件的元素副本。然后，您可以通过将元素与其克隆交换元素来实现解除绑定和重新绑定效果，反之亦然。
这是我正在考虑的方法。尽管我认为我也可能只满足于刷新失败页面。看起来这会变得一团糟。

【解决方案2】：

很遗憾，您无法访问它们。充其量，您可以使用 W3C 的 removeEventListener (docs) 和/或 Microsoft 的 detachEvent (docs) 删除事件侦听器。然而，一旦监听器被移除，它就永远消失了。

removeEventListener有一个注意事项，如果事件被注册了两次，一次表示捕获，一次表示不捕获，你必须将其删除两次；每个案例一次。

要了解有关捕获和不捕获的更多信息，请参阅W3C spec。

【讨论】：

我知道这一点，谢谢。但是使用 jQuery 的unbind 可以有效地删除使用 addEventListener/attachEvent 附加的事件事件。我的问题是在本地缓存事件侦听器，以便我可以重新附加它，或暂时禁用/重新启用它，而无需明确删除它。
您无法缓存侦听器并重新附加它们。无法访问它们。

【解决方案3】：

如果您想暂时禁用正在运行的事件处理程序，为什么不向函数添加转义码？

像这样：

$('#button').click(function(){
    var clicked_element = $(this);
    if(elem.hasClass('event-click-disabled'))
    {
        // logging code so we know exactly what events are being skipped
        console.info(
            'The click event on following element was skipped',
            clicked_element
        );
        return;
    }
    alert('Button clicked');
});

然后，如果您想禁用特定元素上的事件，只需调用

element.addClass('event-click-disabled');

事件处理程序仍在运行，但会立即返回。

【讨论】：