Как остановитьPropagation, когда есть несколько делегаций событий

Question

У меня есть строка таблицы, в которой есть элемент с обработчиком события, делегированным элементу документа, а у самой строки также есть другой обработчик, делегированный элементу 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, но он не работает так, как я ожидал: когда я щелкаю по элементу, обработчик tr не должен запускаться.Кто-нибудь может дать несколько советов?

Answer 1

На самом деле проблема здесь в том, что внутри вашего td есть тег a и естественное поведение тега a состоит в том, что он переносит вас на новую страницу, поэтому вместо использования e.stopPropagation() используйте e.preventDefault().Надеюсь, это может помочь вам.И вы также можете передать true в третьем аргументе, где вы устанавливаете прослушиватель событий.

Answer 2

Добавить stopPropagation в функцию, которую вы добавили в элемент 'tr'.Это должно работать

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...')
})

Answer 3

Если вы хотите предотвратить запуск прослушивателя 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>