Как избежать события от div ниже объекта? - PullRequest
Новая
       103

Как избежать события от div ниже объекта?

3 голосов
/ 22 октября 2019

У меня есть этот код: 

<div style="width:200px;height:100px;border:solid 1px" onclick="alert(1)">
  Title
  <br />
  Subtitle
  <div style="float:right">
  <input type="checkbox" />
  </div>
</div>

Я хочу перенаправить пользователя на URL, когда он нажимает на div (там, где сейчас предупреждение), но я хочу, чтобы пользователь с функциональностью, когда оннажимает на флажок.

Можно ли разрешить нажатие на флажок и изменить статус, не вызывая alert(1) из приведенного ниже элемента div?

Ответы [ 3 ]

6 голосов
/ 22 октября 2019

Вам необходимо использовать event.stopPropagation ();функция. Эта функция предотвращает дальнейшее распространение текущего события в фазах захвата и образования пузырьков. 

<div style="width:200px;height:100px;border:solid 1px" onclick="alert(1)">
Title
<br />
Subtitle
<div style="float:right">
<input type="checkbox" onclick="onCheckBoxCicked(event)"/>
</div>


 function onCheckBoxCicked(event) {
        alert(2)
        event.stopPropagation();
    };
1 голос
/ 22 октября 2019

Вам нужно будет использовать stopPropagation() метод в обработчике событий клика checkbox, поэтому щелчок флажка не будет вызывать щелчок его родительских элементов div:

HTML: 

<input type="checkbox" onclick="avoidAlert(event)" />

JS: 

function avoidAlert(event) {
  event.stopPropagation();
}


function avoidAlert(event) {
  event.stopPropagation();
}
<div style="width:200px;height:100px;border:solid 1px" onclick="alert(1)">
  Title
  <br /> Subtitle
  <div style="float:right">
    <input type="checkbox" onclick="avoidAlert(event)" />
  </div>
</div>

MDN Ссылка для stopPropagation() метод :

stopPropagation() метод интерфейса Event предотвращает дальнейшее распространение текущего события в фазах захвата и всплытия.

0 голосов
/ 22 октября 2019

Вы можете либо попробовать event.stopPropagation() внутри дополнительного обработчика событий на флажке, либо просто проверить внутри обработчика событий div, если цель щелчка была флажком: 

var theDiv = document.querySelector('.outer'),
    theCheckbox = document.querySelector('input');

theDiv.addEventListener('click', divClicked);
    
function divClicked(e) {
  if (e.target !== theCheckbox) {
    alert('You clicked the div!');
  }
}
<div class="outer" style="width:200px;height:100px;border:solid 1px">
  Title
  <br />
  Subtitle
  <div style="float:right">
  <input type="checkbox" />
  </div>
</div>
...