代码之家 › 专栏 › 技术社区 › strager

禁用Click事件处理程序

prototypejs javascript-events javascript

1

strager · 技术社区 · 15 年前

我试图基本上使 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框架。这似乎不是特定于浏览器的问题。

3 回复 | 直到 15 年前

1

3

cllpse 15 年前

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

当事件激发时,将执行已添加的处理程序 按照添加顺序 . 因此,如果要向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();
})

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

因此,您需要做的是使用一个引用变量,跟踪是否允许触发Click事件:

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子句。

2

0

C Bauer 15 年前

不能将对象的Disabled属性设置为true吗?

3

0

Community CDub 8 年前

正如我在评论中所说 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 是一个自定义函数,它将 事件观察 在AS $super .