javascript - 有多个事件委托(delegate)时如何停止传播

我有一个表行，其中有一个元素，其中一个事件处理程序委派给document元素，并且行本身也有另一个处理程序委派给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处理程序。
任何人都可以提供一些提示吗？

最佳答案

如果要阻止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>

关于javascript - 有多个事件委托(delegate)时如何停止传播，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53591913/