Как правильно 'перехватить' событие?

189

15 декабря 2021, 00:40

У меня есть div, в котором распологаются img и a. Нужно вызвать событие при клике по любой области этого элемента: и по пустой, и по тем, где расположены другие элементы. Но получилось так, что a вызывает событие раньше чем div, что делает работу события некоректной. Как сделать div единственным объектом события с помощью JQuery?

$(document).ready(function() { 
  $('div').on('click', event); 
}); 
 
function event(ev) { 
  alert(ev.target.nodeName); 
  $(ev.target).addClass('active'); 
}

div { 
  padding: 10px; 
  background: yellow; 
} 
 
.active { 
  background: blue; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div> 
  <img src="" alt="image"> 
  <br> 
  <a>Text</a> 
</div>

Answer 1

Не очень понятно, что требуется в конечном итоге получить, но на сколько я понял, речь идет о "перехвате", чего конечно же нет, просто event.target возвращает непосредственный элемент с которым происходит взаимодействие, в отличии от event.currentTarget или this, который в свою очередь являются ссылкой на элемент к которому привязан слушатель.

$(document).ready(function() { 
  $('div').on('click', event); 
}); 
 
function event(ev) { 
  console.log('currentTarget: ', ev.currentTarget.nodeName); 
  console.log('this: ', this.nodeName); 
  console.log('target: ', ev.target.nodeName); 
  $(ev.currentTarget).addClass('active'); 
}

div { 
  padding: 10px; 
  background: yellow; 
} 
 
.active { 
  background: blue; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div> 
  <img src="" alt="image"> 
  <br> 
  <a>Text</a> 
</div>

Answer 2

$(this).addClass('active');

$(document).ready(function() { 
  $('div').on('click', event); 
}); 
 
function event(ev) { 
  $(this).addClass('active'); // this !!! 
}

div { 
  padding: 10px; 
  background: yellow; 
} 
 
.active { 
  background: blue; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div> 
  <img src="" alt="image"> 
  <br> 
  <a>Text</a> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Независимый блок

Понимаю вопрос может быть не слишком понятен, но постараюсь изложить суть как можно яснееЕсть блоки в которых расположен контент, они имеют...

149

HTML

Не применяется свойство top к div блоку

Есть блок div с названием класса penguin, мне нужно опустить данный блок на 10% вниз от родительского блока, но свойство top не применяетсяПробовал...

238

Java

NullPointerException при проверке admin ли пользователь

при регистрации пользователя нужно проверить явдяется ли он администратором,проще сказать admin ли его логин, и если он админ,то перекидываю...

291

Java

Нужен ли конструктор, если я использую Getter() and Setter()?

Если при создания сущности, его поля я инициализирую с помощью геттеров и сеттеров, нужен ли мне в таком случае конструктор?

168