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");
    });
});

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

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

您的预期行为是什么？

您尚未指定您希望发生的事情。

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

<强> event.preventDefault（）
如果调用此方法，则不会触发事件的默认操作。

如果您想要同时覆盖这两项内容，请阻止默认操作并阻止事件冒泡，您可以同时调用它们，也可以只在方法结束时使用return false。

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

Answer 2

我遇到同样的问题，一旦我意识到我做了一些“分心错误”就修好了，可能对某些人有所帮助：

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

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

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

Answer 3

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

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();
    }
}

Answer 4

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());
});

Jquery StopPropagation无法在Firefox中运行

4 个答案:

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

您的预期行为是什么？