雅虎事件.stopEvent

发布于 2024-07-15 10:57:19 字数 1561 浏览 2 评论 0原文

我正在尝试使用 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 添加三击处理程序，然后单击在栏上。然后，用户将看到两个警报：barClickTest1 和 barClickTest2。相反，所有三个警报都会发生。 YAHOO.util.Event.stopEvent(e) 没有执行我期望的操作，即阻止事件传播到 barClickTest3。

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

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

我对 JavaScript 事件的理解完全混乱了吗？我如何实现我的目标？

原文

I am trying to prevent JavaScript events from continuing to propagate, using YUI. The following is some minimal HTML and some minimal JavaScript which demonstrates the problem:

HTML:

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

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

What I expect to happen is that the user can click on foo to add the three-click handlers, and then click on bar. Then, the user will see TWO alerts, barClickTest1 and barClickTest2. Instead, all three alerts occur. The YAHOO.util.Event.stopEvent(e) does not do what I expect, which is to stop the event propagating out to barClickTest3.

I have tested my code in Firefox 3.0.7 and in Safari 3.2.1. As you can see above, I have also tried YAHOO.util.Event.stopPropagation(e) and e.stopPropagation(). None of them did the trick.

This is obviously a contrived example, though it does demonstrate the problem. In the real solution, I will only prevent event propagation if some conditions are met.

Is my understanding of JavaScript's events simply messed up? How do I accomplish my goals?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无名指的心愿 2024-07-22 10:57:19

这无法按您的预期工作，因为：

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

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

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