javascript - 如何停止事件传播？

Question

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

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

该函数如下所示:

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

就这么简单。并且工作正常。我刚刚更新了工作中的代码。现在它确实显示了 div，但随后继续执行其他操作，即重新加载整个页面。

我正在使用 Firefox，我看到该按钮现在有一个“冒泡”和“DOM0”事件处理程序。我很想知道这是如何实现的，但更重要的是两个问题:

1. 如何在 addRoleToReportClicked() 函数中停止此操作？ (我假设我可以停止传播，但是如何获取事件的句柄？

2. 是否有任何简单方法可以找到添加这些事件监听器的代码？我尝试了调试，但没有向我显示任何内容。我不想通过20多个js文件和数千行代码来找到它。但我确实想追捕开发者并射杀他。

更新

我尝试过这个:

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

这些都不起作用。考虑到表单提交的想法，我注意到页面上的所有其他按钮都工作正常，但这个按钮内部来自。所以我将标签从“按钮”更改为“a”，效果很好。有人将submit()附加到表单标签内的每个按钮。如何停止提交？

Answer 1

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

停止传播 -

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

或者，取消绑定(bind)其他处理程序 -

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

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