Question

我知道我需要使用stopPropigation，但是如何从onClick函数获取对该事件的引用。此外，我如何找出事件如何附加到元素。所以我有一个像这样的简单按钮：

<button class="btn btn-default" onclick="addRoleToReportClicked()">

该函数如下所示：

function addRoleToReportClicked() {
    $('#addRoleDiv').show();
}

太简单了。并且工作正常。 Unitl我刚刚从工作中更新了代码。现在它确实显示了div，但后来继续做其他事情，即重新加载整个页面。

我正在使用Firefox，我看到按钮现在有一个＆＃34;冒泡＆＃34;和＆＃34; DOM0＆＃34;事件处理程序。我很想知道它是如何实现的，但更重要的是2个问题：

如何在addRoleToReportClicked（）函数中停止此操作？（我假设我可以停止播放，但我如何处理该事件？
是否有 easy 方法可以找到添加这些事件侦听器的代码？我尝试了调试，但这并没有向我显示任何内容。我不想通过20多个js文件和数千行代码来查找它。但我确实想追捕开发商并开枪。

更新

我试过了：

    $("#addRoleDivButton").unbind("click").on("click", function(e){
      e.cancelBubble = true;
      e.stopPropagation();
      e.bubbles = false;
      $('#addRoleDiv').show();
    });

没有一个有效。考虑到表单子目标，我注意到页面上的所有其他按钮都工作正常，但是这个按钮是里面的 a。所以我从＆＃34;按钮改变了标签＆＃34;到＆＃34; a＆＃34;它工作正常。有人将一个submit（）附加到表单标记内的每个按钮。如何停止提交？

Answer 1

有很多方法可以阻止冒泡，最流行的两种方式是 -

停止传播 -

function addRoleToReportClicked(e) {
    e.stopPropagation();
    $('#addRoleDiv').show();
}

或解除其他处理程序的绑定 -

<button class="btn btn-default btn-1">

$(".btn-1").unbind("click").on("click", function(){
    $('#addRoleDiv').show();
});

Answer 2

1）事件作为参数传递给回调函数

function addRoleToReportClicked(event) {
    event.stopPropagation();
    $('#addRoleDiv').show();
}

stopPropagation()将阻止事件触发父元素的回调。

在某些情况下，您可能希望使用stopImmediatePropagation()：我留给您寻找差异

jquery: stopPropagation vs stopImmediatePropagation

请注意，您可能/也希望阻止浏览器执行其默认操作:(例如，单击链接也会打开链接，单击提交按钮将发送表单）。

在这种情况下，您有event.preventDefafult()

修改

请注意，如果因为您有
而调用了addRoleToReportClicked
<button class="btn btn-default" onclick="addRoleToReportClicked()">

然后event对象不会传递给函数

您可以删除onclick属性。

然后，如果您需要点击按钮，请使用Jquery的on('click')

2）Google Chrome（开发工具）会告诉您哪些事件侦听器附加到元素上（只需右键单击并检查该元素）。

AFAIK它没有告诉你在代码中设置事件监听器的位置。

但是，如果您在源上对事件监听器的名称执行全局搜索，则应该找到它。

Answer 3

由于您尚未接受上述任何答案，我将在此处添加。

function addRoleToReportClicked(event) {
    $('#addRoleDiv').show();
    return false;
}

通过添加return false;，它应该停止运行任何其他功能。如果这个或任何其他解决方案不起作用，那么必须有其他东西刷新页面。

使用chrome or firefox调试器自行尝试和调试。

如何停止事件传播？

3 个答案: