如何删除 YUI 委托事件？答案

【问题标题】：How do I remove YUI delegated events?如何删除 YUI 委托事件？
【发布时间】：2014-05-26 12:15:27
【问题描述】：

我正在尝试为允许用户注入 javascript 的平台创建脚本。他们正在使用 YUI，特别是 Y.one('body).delegate('click',...) 将事件附加到按钮。我想拦截此按钮，但我不知道如何停止、阻止、删除或以其他方式阻止事件处理程序触发。

注意：我无法直接访问由 `Y.delegate() 返回的处理程序

到目前为止我已经尝试过

Y.detachAll('click');
Y.unsubscribeAll('click');
Y.one('body').detachAll('click');
Y.one('body').unsubscribeAll('click');
Y.one('.the-delegated-class').detachAll('click');
Y.one('.the-delegated-class').unsubscribeAll('click');

一切都无济于事。事实上，我唯一的成功就是完全删除并替换了正文 HTML，它显然会带上所有的事件处理程序，而不仅仅是我想要删除的那个。

有什么见解吗？

【问题讨论】：

那个平台绝不是squarespace吧？ :P
@Cawas 是的，不知道我为什么这么含糊...：-/
那么相关，我正在使用destroy(true)：stackoverflow.com/a/9405055/274502
这对我来说似乎有点矫枉过正，有潜在的副作用，尽管可能不足以胜过它对你有用的事实......yuilibrary.com/yui/docs/api/classes/Node.html#method_destroy
这可能会有所帮助：answers.squarespace.com/questions/100302/…

标签： javascript yui

【解决方案1】：

原来我的尝试之一是正确的方法，但我的用法是错误的。我（在不知不觉中）试图在事件被附加之前分离它。

在以下情况下表示： Y.one('body).delegate('click',...)

这有效： Y.one('body').detach('click')

虽然理想情况下您会直接在委托调用返回的 EventHandle 上调用 detach。

【讨论】：

【解决方案2】：

委托 Event 方法似乎没有将句柄存储在任何地方，您可能会为 Event.delegate 创建一个补丁替换，用于存储针对委托元素的句柄。一个基本的 YUI 补丁示例：https://gist.github.com/tivac/1424351

未经测试的代码：

var config = {
    groups : {
        patches : {
            base : "/js/patches/",
            modules : {
                "node-event-delegate-patches" : {
                    path : "node-event-delegate.js",
                    condition : {
                        name : "node-event-delegate-patches",
                        trigger : "node-event-delegate",
                        test : function() { return true; }
                    }
                }
            }
        }
    }
};

YUI.add("node-event-delegate-patches", function(Y) {
    var L = Y.Lang;

    Y.Node.prototype.delegate = function(type) {
        var args = Y.Array(arguments, 0, true),
            handle,
            index = (L.isObject(type) && !L.isArray(type)) ? 1 : 2;
        args.splice(index, 0, this._node);

        if (!L.isArray(this._node._delegate_event_handles)){
            this._node._delegate_event_handles = [];
        }
        handle = Y.delegate.apply(Y, args);
        this._node._delegate_event_handles.push( handle );
        return handle;
    };

    Y.Node.prototype.detachDelegates = function(){
        Y.Array.each(this._node._delegate_event_handles, function(handle){
            handle.detach();
        });
    }
});

【讨论】：