如何模仿 stopImmediatePropagation() 的行为(不使用 jquery) [英] How can I mimic the behaviour of stopImmediatePropagation() (without using jquery)

问题描述

我正在为一个 Javascript 库编写事件处理代码，并且我正在尝试实现类似于 stopImmediatePropagation() 的东西，它也适用于 IE 6.

I'm working on the event-handling code for a Javascript library, and I'm trying to implement something similar to stopImmediatePropagation() that will also work in IE 6.

目前事件处理的工作方式是，我们的事件处理代码向对象注册，然后用户向我们的事件处理程序注册他们所有的事件.

The way the event handing works currently, is that our event handing code registers with the object, and then users register all their events with our event handlers.

我尝试模拟 stopImmediatePropagation() 的第一种方法是简单地将该方法添加到事件中(如果它尚不存在):

The first way I tried to emulate stopImmediatePropagation() was to simply add that method to the event if it didn't already exist:

if (event != null && event.isImmediatePropagationEnabled == null) {
    event.stopImmediatePropagation = function () {
        this.isImmediatePropagationEnabled = false;
    };
    event.isImmediatePropagationEnabled = true;
    event.isImmediatePropagationStopped = function () {
        return !this.isImmediatePropagationEnabled;
    };
}

当用户的事件处理回调被调用时，它们被传递到我们得到的同一个事件对象中.如果他们愿意，他们可以在事件上调用 stopImmediatePropagation().

When the users' event handler callbacks are called, they're passed in the same event object we get. They can call stopImmediatePropagation() on the event if they wish.

当我们遍历所有向我们注册的事件处理回调时，我们每次都检查传播布尔值:

As we're looping through all the event handling callbacks registered with us, we check the propagation boolean each time:

given some event
for [all the callbacks] {
    if (event != null &&
        event.isImmediatePropagationStopped != null &&
        event.isImmediatePropagationStopped()) {
        stopPropagation = true;
        break;
    }

    execute the callback, passing in the event
}

这在某些浏览器中效果很好.因为事件持续存在，即使我们的事件处理代码退出并且事件冒泡到下一个元素，一旦我们的事件处理代码再次被命中，isImmediatePropagationStopped 属性仍然存在，因此不再执行回调(向我们注册的).

This works great in some browsers. Because the event persists, even once our event handling code exits and the event bubbles up to the next element, once our event handing code gets hit again the isImmediatePropagationStopped property still exists, and so no more callbacks (that are registered with us) are executed.

在 Internet Explorer(甚至 8)中，这不起作用.在同一个元素上，一切都很好；但是一旦事件冒泡，似乎生成了一个全新的事件对象，并且我们失去了 isImmediatePropagationStopped 属性.这意味着我们无法检查用户是否关闭了传播.

In Internet Explorer (even in 8), this doesn't work. On the same element, things are fine; but once the event bubbles, it seems like an entirely new event object is generated, and we lose the isImmediatePropagationStopped property. This means we can't check if the user turned off propagation.

所以我的问题是，有没有人对如何做到这一点有任何想法?我知道 jquery 管理类似的壮举( http://bugs.jquery.com/ticket/3355 )，但它们以类似的方式进行 - 将其存储在对象的额外数据中.我不知道的是，物体的不持久性如何不会像我一样伤害他们.(而且由于各种原因，这里不能使用 jquery 本身)

So my question is, does anyone have any ideas on how to do this? I know that jquery manages a similar feat ( http://bugs.jquery.com/ticket/3355 ), but they do it a similar way - storing it in extra data for the object. What I don't know is how the non-persistence of the object doesn't hurt them like it does me. (And for various reasons, using jquery itself is not an option here)

如果有人有任何见解——要么是因为比我更了解 Javascript，要么是因为他们能想到一种巧妙的方法来做到这一点——我将不胜感激.谢谢！

If anyone has any insights - either due to knowing more about Javascript than me, or because they can think of a neat way to do this - I'd greatly appreciate it. Thanks!

推荐答案

试着改变你的函数:

event.stopImmediatePropagation = function () {
    this.isImmediatePropagationEnabled = false;
    this.cancelBubble = true;
};

cancelBubble"标志是 IE 的东西，它应该防止事件冒泡父 DOM 元素链.

That "cancelBubble" flag is an IE thing, and it should prevent the event from bubbling up the parent DOM element chain.

这篇关于如何模仿 stopImmediatePropagation() 的行为(不使用 jquery)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！