javascript - 雅虎事件.stopEvent

Question

我试图阻止 JavaScript 事件继续传播，使用 YUI。以下是一些最小的 HTML 和一些最小的 JavaScript，它们演示了这个问题：

HTML：

<a href="#foo" onClick="fooClickTest()" id="foo">foo</a>&nbsp;
<a href="#bar" id="bar">bar</a>&nbsp;

JavaScript：

function fooClickTest(e) {
    alert('fooClickTest');
    YAHOO.util.Event.addListener('bar', 'click', barClickTest1);
    YAHOO.util.Event.addListener('bar', 'click', barClickTest2);
    YAHOO.util.Event.addListener('bar', 'click', barClickTest3);
    YAHOO.util.Event.preventDefault(e);
}

function barClickTest1(e) {
    alert('barClickTest1');
    YAHOO.util.Event.preventDefault(e);
}

function barClickTest2(e) {
    alert('barClickTest2');
    YAHOO.util.Event.preventDefault(e);
    YAHOO.util.Event.stopEvent(e);
// Also tried:
//  YAHOO.util.Event.stopPropagation(e);
// and:
//        if (e.stopPropagation) {
//            e.stopPropagation();
//        } else {
//            e.cancelBubble = true;
//        }
}

我期望发生的是用户可以单击foo添加三键处理程序，然后单击bar. 然后，用户将看到两个警报，barClickTest1并且barClickTest2。相反，会出现所有三个警报。YAHOO.util.Event.stopEvent(e)不符合我的预期，即阻止事件传播到barClickTest3.

我已经在 Firefox 3.0.7 和 Safari 3.2.1 中测试了我的代码。正如您在上面看到的，我也尝试过YAHOO.util.Event.stopPropagation(e)and e.stopPropagation()。他们都没有成功。

这显然是一个人为的例子，尽管它确实证明了这个问题。在真正的解决方案中，我只会在满足某些条件时才阻止事件传播。

我对 JavaScript 事件的理解是不是一团糟？我如何实现我的目标？

Answer 1

这不像您预期​​的那样工作，因为：

• YAHOO.util.Event.preventDefault()只是告诉浏览器不要执行与元素关联的默认操作，在这种情况下，导航到href锚点上的属性。
• YAHOO.util.Event.stopPropagation()取消事件冒泡并触发父元素上的事件处理程序。
• YAHOO.util.Event.stopEvent()只需调用preventDefaultand stopEvent。

如果不编写额外的代码，就无法阻止单个元素上的某些事件侦听器触发，即使可以，也无法保证触发事件侦听器的顺序。

您需要将代码重写为单个事件处理程序，以便能够控制与您的第三次单击处理程序关联的代码是否将执行。