Захват событий jQuery останавливает распространение - PullRequest
Новая
       31

Захват событий jQuery останавливает распространение

0 голосов
/ 16 сентября 2018

У меня есть прослушиватель событий для родительского элемента 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
}

Ответы [ 2 ]

0 голосов
/ 16 сентября 2018

Если вы хотите, чтобы при щелчке дочернего div не вызывался обработчик кликов родительского div, вам нужно добавить event.stopPropagation() в обработчик событий кликов дочернего 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.

0 голосов
/ 16 сентября 2018

Как вы сказали, 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>
...