Question

我正在尝试暂时禁用click上的<div>事件。

我尝试了以下（preview）：

$('hello').observe('click', function (e) {
    e.stop();
});

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

但是，单击#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框架。这似乎不是特定于浏览器的问题。

Answer 1

为事件分配处理程序时;你基本上只是存储一组事件触发时要执行的函数。

当事件触发时，您添加的处理程序将按照我们添加的顺序执行。因此，如果您要为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子句。

Answer 2

您不能将对象的disabled属性设置为true吗？

Answer 3

正如我在roosteronacid's answer的评论中所说，我写了Event.observe的扩展名。 适用于大多数浏览器，但 不是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是一个自定义函数，可将原始Event.observe放入$super。

禁用单击事件处理程序

3 个答案: