YUI 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)和e.stopPropagation().他们都没有成功.

这显然是一个人为的例子,尽管它确实证明了这个问题.在真正的解决方案中,如果满足某些条件,我将仅阻止事件传播.

我对JavaScript事件的理解是否搞砸了？我如何实现目标？

Answer 1

这不符合您的预期,因为:

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

在不编写额外代码的情况下,无法阻止单个元素上的某些事件侦听器触发,即使您无法保证触发事件侦听器的顺序.

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