Отключение события click от дочернего элемента родительского div

Question

Я пытаюсь добавить событие при нажатии на div с родительским классом. Теперь внутри этого div у меня есть div с дочерним классом, который имеет свое собственное событие click.

Как мне удается отключить событие click родительской функции для этого дочернего элемента, чтобы выполнить функцию самого дочернего элемента?

Я пытался использовать pointer-event:none;, но, похоже, он не работает. Я написал jsfiddle для лучшего понимания.

https://jsfiddle.net/arq1epbs/

$(document).on('click', '.parent', function() {
  var url = $(this).attr("data-url")
  document.location.href = url
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent" data-url="www.google.com">
  Im the parent
  <div class="child">
    im the child and I don't want to go to Google
  </div>
</div>

Заранее всем спасибо за помощь!

Answer 1

Вы можете использовать stopPropagation():

 $(document).on('click', '.parent', function () {
    var url = $(this).attr("data-url")
    document.location.href = url 
});
 $(document).on('click', '.child', function (e) {
 e.stopPropagation();
});

Поскольку он не работает во фрагменте стека, здесь Fiddle Для справки: stopPropagation ()

Answer 2

Просто добавьте эту строку:

$(document).on('click', '.parent', function (e) {
    if(e.target !== this) return false;   //This line added
    var url = $(this).attr("data-url")
    document.location.href = url 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent" data-url="www.google.com">
Im the parent
  <div class="child">
  im the child and I don't want to go to Google
  </div>
</div>

Answer 3

Вы можете просто вызвать event.stopPropagation() внутри дочернего события щелчка, чтобы предотвратить всплытие события в дереве DOM, предотвращая уведомление любых родительских обработчиков о дочернем событии щелчка, например:

$(document).on('click', '.parent', function() {
  //var url = $(this).attr("data-url")
  //document.location.href = url
  console.log('Parent Clicked');
});

$(document).on('click', '.child', function(event) {
  event.stopPropagation();
  console.clear();
  console.log('Child Clicked');
});

.parent{background:#99c0c3;width:350px;height:120px;position:relative}
.child{background:#ffde99;width:300px;height:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent" data-url="www.google.com">
  Im the parent
  <div class="child">
    im the child and I don't want to go to Google
  </div>
</div>

Answer 4

Вы можете сделать это в «чистом виде» JS

document.querySelector('div.parent').onclick = evt =>
  {
  if (!evt.target.matches('div.parent')) return // reject sub elements click

  document.location.href = evt.target.dataset.url
  }

div.parent { cursor: pointer }
div.child { cursor: default }

<div class="parent" data-url="www.google.com">
  Im the parent
  <div class="child">
    Im the child and I don't want to go to Google
  </div>
</div>