Jquery StopPropagation无法在Firefox中运行

Question

我有这个代码在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());
    });
});?

Answer 1

我不知道你的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在方法结束时使用.

如果你能详细说明你想要达到的目标,我们可以更具体地建议一个适合你的解决方案.

Answer 2

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

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

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

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