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

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

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

YUI stopEvent无效

1 个答案: