4

我在 Safari 和 Chrome 上有这段代码，但在 Firefox 中没有。Firefox 的 StopPropagation() 有问题吗？

$(function() {
    // Setup drop down menu
    $('.dropdown-toggle').dropdown();

    // Fix input element click problem
    $('.login-menu form').click(function(e) {
        alert(e.isPropagationStopped());
        e.stopPropagation();
        alert(e.isPropagationStopped());
    });
});​
4

4 回答 4

7

我不知道您的 HTML 看起来如何，但stopPropagation在 FireFox 中可以正常工作。

我认为您的期望可能不正确。

根据stopPropagation()的文档

event.stopPropagation()
防止事件在 DOM 树中冒泡，防止任何父处理程序收到事件通知。

例如，假设 HTML 是这样的：

<div id="parent">
    <div class="login-menu">click anywhere</div>
</div>

此代码工作正常，点击事件没有冒泡：

$(function() {
    // Fix input element click problem
    $('.login-menu').click(function(e) {
        alert(e.isPropagationStopped());
        e.stopPropagation();
        alert(e.isPropagationStopped());
    });

    $("#parent").click(function(e){
        alert("parent received click");
    });
});​

演示- 在 FF 中工作 - 不会冒泡事件

注释掉e.stopPropagation();DEMO 中的行，正如预期的那样，事件会冒泡，显示来自父级的警报。

您的预期行为是什么？

你没有具体说明你期望发生什么。

例如，如果您希望触发事件的默认操作 no，您可以使用preventDefault()

event.preventDefault()
如果调用该方法，则不会触发事件的默认动作。

如果您想同时涵盖两者，请防止默认操作并防止事件冒泡，您可以同时调用两者或仅return false在方法结束时使用。

如果您可以详细说明您想要实现的目标，我们可以更具体地建议适合您的解决方案。

于 2012-09-23T21:46:02.933 回答
5

我遇到了同样的问题，并在我意识到我犯了几个“分心错误”后立即修复它，可能对某些人有帮助：

1）记住“事件”参数：触发事件时执行的函数（即作为参数传递给 $('.login-menu form').click() 的函数）应该接受代表事件的参数（按照惯例，在大多数教程中称为“事件”或“e”）。Chrome 允许您忘记它，而 Firefox 需要它。

2)记得清除 Firefox 的缓存(CTRL + F5)：如果像我一样禁用 Chrome 的缓存以进行开发（工具 -> Javascript 控制台 -> 选项 -> 禁用缓存（当 DevTools 打开时）），但不要这样做在 Firefox 中也是如此（因为这样做有点棘手，而且我很懒），记得使用 CTRL + F5 重新加载页面

它现在就像一个魅力，对我来说......

于 2014-04-03T00:13:04.093 回答
2

这对我有用（在所有浏览器中，无论是否可以传递事件），我正在使用谷歌地图标记，并且无法将事件传递给方法：

var stopPropagation = function (event) {
    if (event && event.stopPropagation) {
        event.stopPropagation();
    } 
    else if (window.event) {
        window.event.cancelBubble = true;
    }
    else if (window.$.Event.prototype) {
        window.$.Event.prototype.stopPropagation();
    }
}
于 2013-07-31T18:57:34.830 回答
1

stopPropagation用于阻止事件在父元素上触发。

有关其工作原理的示例，请参见http://jsfiddle.net/Accus/2/ 。

HTML：

<body>
    <div>
        <span>Test</span>
    </div>​
<body>

JS：

$('span').click(function(e) {
    console.log('span');
    console.log(e.isPropagationStopped());
});

$('div').click(function(e) {
    console.log('div');
    console.log(e.isPropagationStopped());
    e.stopPropagation();
    console.log(e.isPropagationStopped());
});

$('body').click(function(e) {
    console.log('body');
    console.log(e.isPropagationStopped());
});

​
​
于 2012-09-23T21:40:25.117 回答