javascript - YAHOO Event.stopEvent 事件

Question

我正在尝试使用 YUI 阻止 JavaScript 事件继续传播。以下是演示问题的一些最小 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) 和 e.stopPropagation()。他们都没有成功。

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

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

Answer 1

这没有像您预期的那样工作，因为:

• > YAHOO.util.Event.preventDefault()只是告诉浏览器不要执行与元素关联的默认操作，在本例中，导航到 anchor 上的 href 属性。
• > YAHOO.util.Event.stopPropagation()取消父元素上的事件冒泡和触发事件处理程序。
• > YAHOO.util.Event.stopEvent()只需调用 preventDefault 和 stopEvent。

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

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