为什么单击HTML元素，两次开火？

Question

这是一个问了几次问题并得到了解决。 我们使用

e.stopImmediatePropagation();

或

e.stopPropagation(); 
e.preventDefault();

但问题的主要部分没有得到明确回答......
为什么会这样？这些方法如何解决这个问题？

示例： 我在服务器端创建这个脚本和html并将其传递给客户端：

Jquery的

$('body').on('click', '#GridContainer tbody tr', function (e) {
                e.stopImmediatePropagation();
...
});

HTML

<div id="GridContainer" class="webGridContainer">
    <table class="webgrid TestList table  selectableGrid" id="GridTestList">
        <thead class="TestListHeader">
            <tr>
                <th data-lab-name="TestId">code</th>
                <th data-lab-name="TestName">Name</th>
            </tr>
        </thead>
        <tbody class="TestListBody TestListAlternativeRow">
            <tr class="">
                <td data-grid-name="TestId">0</td>
                <td data-grid-name="TestName" class="TestListTestName" style="">---</td>
            </tr>
        </tbody>
        <tfoot class="TestListGridFooter"></tfoot>
    </table>
</div>

当我删除e.stopImmediatePropagation();点击两次火。

Answer 1

在Chome开发工具上，选中{{1}}，您就可以看到是谁触发了此事件。