Событие jQuery фиксирует остановку распространения

У меня есть прослушиватель событий в родительском div, и я бы хотел, чтобы он не запускался и в дочернем div при щелчке.

Я использую jQuery для этого, так как мне нужно, чтобы .on() был динамически созданным элементом, а также динамически создавался дочерний div со встроенным onclick="myFunction()". Когда onclick myFunction происходит в дочернем элементе, я не хочу, чтобы родительский элемент .on(click) вызывался снова.

HTML:

    <div id="parent" class="areatext" onkeydown="checkR()">
    <div id="input" contenteditable="true" style="min-height:26px;" onkeyup="checkTyping()"></div>
    <div id="child" onclick="myFunction()"></div>
    </div>

js-файл 1:

$('#parent').on('click', function(event){
    $('#input').focus();
    console.log('parent clicked!');
    event.stopPropagation();
});

js-файл 2:

function myFunction(event){
   // actions
   // when this is clicked, #parent .on(click) also triggers, i don't want that
}

jquery event-handling stoppropagation
person Community    schedule 16.09.2018    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Как вы сказали, jQuery не поддерживает прослушивание событий на этапе захвата; для этого вам придется использовать стандартный Javascript вместо jQuery. Например:

const parent = document.querySelector('#parent');
parent.addEventListener('click', (e) => {
  if (e.target.matches('#child')) return;
  e.stopPropagation();
  console.log('parent was clicked, but not on child');
}, true);
function myFunction(event){
   console.log('child was clicked on');
   // when this is clicked, #parent .on(click) also triggers, i don't want that
}
<div id="parent" class="areatext">
  parent
  <div id="input" contenteditable="true" style="min-height:26px;" onkeyup="checkTyping()"></div>
  <div id="child" onclick="myFunction()">child</div>
</div>

person CertainPerformance    schedule 16.09.2018
comment
у меня не работает, пожалуйста, проверьте, я отредактировал его, чтобы быть более конкретным в отношении моей ситуации с кодом, может ли быть тот факт, что я динамически назначаю onclick дочерним div? я имею в виду, что эти дочерние элементы div создаются динамически с уже встроенным onclick=myFunction(). - person ; 16.09.2018
comment
Спасибо, это действительно работает, я использовал неправильный класс внутри .matches() - person ; 16.09.2018

arrow_upward
2
arrow_downward

Если вы хотите, чтобы обработчик кликов родительского div не вызывался при нажатии дочернего div, вам нужно будет добавить event.stopPropagation() в обработчик события click дочернего div.

Согласно вашему коду:

$('#parent').on('click', function(event){
    $('#input').focus();
    console.log('parent clicked!');
    //event.stopPropagation(); <-- Not needed
});

$('#parent').on('click', '.child', function(event){
    event.stopPropagation();
    // ^^^^ Add here
    console.log('child clicked!');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent" class="areatext" onkeydown="checkR()">Parent
    <div id="input" contenteditable="true" style="min-height:26px;" onkeyup="checkTyping()"></div>
    <div class="child">child</div>
</div>

Я предлагаю вам прочитать https://javascript.info/bubbling-and-capturing, чтобы узнать, как всплытие и захват работает в JavaScript.

person vatz88    schedule 16.09.2018
comment
Помещенный в myFunction, как вы предложили, в конце, прежде чем } закроется, консоль говорит, что event.stopPropagation(); это не функция - person ; 16.09.2018
comment
@notsure Не уверен, почему это произошло, нужно отладить ваш код. Но поскольку вы используете jQuery, можете ли вы использовать jQuery для добавления прослушивателя событий в child div вместо html-атрибута onclick. Я обновил свой ответ. Это должно работать. - person vatz88; 16.09.2018
comment
@notsure, хотя вы отметили ответ как принятый, вы все равно можете проверить мой обновленный ответ. В jQuery есть способ обрабатывать события динамически добавляемых элементов. И вам не нужно использовать атрибут html для добавления прослушивателя событий. - person vatz88; 16.09.2018