Javascript 禁用单击事件处理程序

我试图暂时禁用

上的

单击事件

我尝试了以下方法（）：

但是，当单击
#hello
时，警报框仍会出现。我不希望调用第二个附加的处理程序，也不希望更改第二个处理程序

我还将接受以下解决方案：

$('hello').observe('click', function (e) {
    alert('click not stopped!');
});

$('hello').disableEvent('click');

// Now, handler won't be called

$('hello').observe('click', function (e) {
    alert('click not stopped (2)!');
});

// New handler won't be called, either

$('hello').enableEvent('click');

// Now, handler will be called

我正在使用Prototype.js框架。这似乎不是特定于浏览器的问题。
在为事件分配处理程序时，是否可以将对象的disabled属性设置为true？
；您基本上只是存储一组在事件触发时要执行的函数

当事件激发时，您添加的处理程序将按照添加的顺序执行。因此，如果要向div的click事件添加三个处理程序：

$("div").observe("click", function ()
{
    alert("one");
});

$("div").observe("click", function ()
{
    alert("two");
});

$("div").observe("click", function ()
{
    alert("three");
});

。。当div元素的click事件触发时，您将收到三个警报（“一”、“二”和“三”）。如果您输入以下内容，这三个警报仍将显示：

$("div").observe("click", function (e)
{
    e.stop();
})

。。因为您只取消一个特定处理程序的事件。不是所有关联的处理程序。




因此，您需要做的是使用一个引用变量，它跟踪是否允许触发单击事件：

var cancelClickEvent = true;

$("div").observe("click", function ()
{
    // if cancelClickEvent is true, return the function early, to
    // stop the code underneath from getting executed
    if (cancelClickEvent) return;

    // your code goes here
});

然后，您需要在所有处理程序中实现上述if子句。
正如我在对的评论中所说，我为
事件编写了一个扩展。请注意
。适用于大多数浏览器，但不适用于IE

// XXX HACK XXX
(function () {
    var handlerCache = $A([ ]);

    function findHandler(either) {
        var pair = handlerCache.find(function (pair) {
            return $A(pair).member(either);
        });

        return pair && pair[0];
    }

    function addHandler(handler) {
        function newHandler(e) {
            if (!e.halted) {
                handler.apply(this, arguments);
            }
        }

        handlerCache.push([ handler, newHandler ]);

        return newHandler;
    }

    Event.observe = Event.observe.extended(function ($super, element, eventName, handler) {
        handler = findHandler(handler) || addHandler(handler);

        $super(element, eventName, handler);
    });

    Event.stopObserving = Event.stopObserving.extended(function ($super, element, eventName, handler) {
        handler = findHandler(handler) || handler;

        $super(element, eventName, handler);
    });

    Element.addMethods({
        observe: Event.observe
    });

    Event.prototype.halt = function () {
        this.halted = true;
    };
}());

注意：
Function.prototype.extended
是一个自定义函数，它将原始的
事件放置在as
$super
中，但它似乎不起作用（
），很遗憾。它将被禁用=“true”，并且是html标准。。。请参阅编辑：检查已接受的答案，而不是已投票的答案。您查看了吗？这可以用来有效地终止事件。好的，现在我明白了一点。但是，我真的不想修改其他处理程序。我正在考虑重写
元素。观察
以检查
事件上的某个标志来包装处理程序。这可能行得通吗？覆盖核心功能从来都不是一个好主意——你永远不知道你可能会破坏什么。。当新版本出现时，你会怎么做？重新实施您的修改？。。如果API发生变化怎么办？。。如果你想要一个更干净的方法；在div元素上使用disabled属性，而不是全局引用变量来确定是否应该取消事件；我打算在事件实例上使用一个标志（在处理程序之间传递）。我同意覆盖核心不是一个好主意，但目前我几乎看不到其他选择；我祝福你；）。。。祝你好运，伙计。
// XXX HACK XXX
(function () {
    var handlerCache = $A([ ]);

    function findHandler(either) {
        var pair = handlerCache.find(function (pair) {
            return $A(pair).member(either);
        });

        return pair && pair[0];
    }

    function addHandler(handler) {
        function newHandler(e) {
            if (!e.halted) {
                handler.apply(this, arguments);
            }
        }

        handlerCache.push([ handler, newHandler ]);

        return newHandler;
    }

    Event.observe = Event.observe.extended(function ($super, element, eventName, handler) {
        handler = findHandler(handler) || addHandler(handler);

        $super(element, eventName, handler);
    });

    Event.stopObserving = Event.stopObserving.extended(function ($super, element, eventName, handler) {
        handler = findHandler(handler) || handler;

        $super(element, eventName, handler);
    });

    Element.addMethods({
        observe: Event.observe
    });

    Event.prototype.halt = function () {
        this.halted = true;
    };
}());