有多个事件委托时如何停止传播

Question

我有一个 table 行，其中有一个元素具有委托给文档元素的事件处理程序，并且该行本身也有另一个委托给 tbody 元素的处理程序。代码如下：

// first part is defined in an initiating script file, so no jQuery used.
document.addEventListener('click', function(e) {
    var el = e.srcElement || e.target;

    if (el && el.classList && el.classList.contains('gotocontact')) {
        e.stopPropagation();
        alert('going to contact...')
    }
})
// second part is defined after the jQuery included...
$('#list').on('click', 'tr', function() {alert('click tr...')})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table class="table">
    <tbody id="list">
        <tr>
            <td><a class="gotocontact">John Doe</a></td>
            <td>Male</td>
        </tr>
        <tr>
            <td><a class="gotocontact">Jane Doe</a></td>
            <td>Female</td>
        </tr>
    </tbody>
</table>

我将 stopPropagation 放在那里，但它没有像我预期的那样工作：当我单击 a 元素时，不应触发 tr 处理程序。任何人都可以提供一些提示吗？

Answer 1

如果你想阻止jQuery监听器触发，你应该在捕获阶段而不是在阶段调用stopPropagation ]冒泡阶段，通过将第三个true参数传递给addEventListener:

document.addEventListener('click', function(e) {
    var el = e.srcElement || e.target;

    if (el && el.classList && el.classList.contains('gotocontact')) {
        e.stopPropagation();
        alert('going to contact...')
    }
}, true)
// ^^^^ add third parameter

$('#list').on('click', 'tr', function() {alert('click tr...')})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table class="table">
    <tbody id="list">
        <tr>
            <td><a class="gotocontact">John Doe</a></td>
            <td>Male</td>
        </tr>
        <tr>
            <td><a class="gotocontact">Jane Doe</a></td>
            <td>Female</td>
        </tr>
    </tbody>
</table>

Answer 2

实际上，这里的问题是在您的 td 中有 a 标签，而 a 标签的自然行为是它将您带到新页面，而不是使用e.stopPropagation() 使用 e.preventDefault()。希望，它可能会对你有所帮助。您还可以在设置事件侦听器的第三个参数中传递 true。

Answer 3

在您添加到 'tr' 元素的函数中添加 stopPropagation。这应该有效

document.addEventListener('click', function (e) {
  var el = e.srcElement || e.target;
  if (el && el.classList && el.classList.contains('gotocontact')) {
  e.stopPropagation();
  alert('going to contact...')
 }
})
// second part is defined after the jQuery included...
$('#list').on('click', 'tr', function (e) {
 e.stopPropagation();
 alert('click tr...')
})

有多个事件委托时如何停止传播

How to stopPropagation when there are multiple event delegations

javascript

jquery

delegation