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

问题描述

我正在处理一个Javascript库的事件处理代码，我正在尝试实现类似于stopImmediatePropagation（）的类似于IE 6的工作。

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

我试图模拟stopImmediatePropagation（）的第一种方法是将该方法简单地添加到事件中，如果它不存在：

  if（event！= null&&&  event.isImmediatePropagationEnabled == null）{
 event.stopImmediatePropagation = function（）{
 this.isImmediatePropagationEnabled = false; 
}; 
 event.isImmediatePropagationEnabled = true; 
 event.isImmediatePropagationStopped = function（）{
 return！this.isImmediatePropagationEnabled; 
}; 
} 
  

当用户的事件处理程序回调被调用时，我们得到的同样的事件对象他们可以在事件中调用stopImmediatePropagation（），如果他们愿意的话。

当我们循环遍历我们注册的所有事件处理回调时，我们每次检查传播布尔值：$ {





$ b如果（event！= null& ;&
event.isImmediatePropagationStopped！= null&&
event.isImmediatePropagationStopped（））{
stopPropagation = true;
break;
}

执行回调，传递事件
}

这在一些浏览器中效果很好。因为事件仍然存在，即使我们的事件处理代码退出并且事件发生到下一个元素，一旦我们的事件处理代码再次被击中，isImmediatePropagationStopped属性仍然存在，所以没有更多的回调（注册到我们）被执行。

在Internet Explorer（即使在8）中，这不起作用。在同样的元素上，事情很好但是一旦事件发生了气泡，它就像一个全新的事件对象被生成，我们丢失了isImmediatePropagationStopped属性。这意味着我们无法检查用户是否关闭传播。

所以我的问题是，有没有人有任何想法如何做到这一点？我知道jquery管理类似的壮举（ http://bugs.jquery.com/ticket/3355），但它们以类似的方式进行操作 - 将其存储在对象的额外数据中。我不知道的是，不坚持的对象不会像我这样伤害他们。 （由于各种原因，使用jquery本身不是一种选择）

如果有任何人有任何见解 - 要么是比我更了解Javascript，还是因为他们可以想到一个整洁的方式来做 - 我非常感激。谢谢！

解决方案

尝试更改您的功能：

  event.stopImmediatePropagation = function（）{
 this.isImmediatePropagationEnabled = false; 
 this.cancelBubble = true; 
}; 
  

cancelBubble标志是一个IE的东西，它应该防止事件冒泡的父母DOM元素链。

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.

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;
    };
}

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
}

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.

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.

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)

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!

解决方案

Try changing your function a little:

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

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

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