Как избежать регистрации двух событий щелчка мыши из div поверх другого?

JSFiddle ссылка на код

Ситуация:

  • У меня есть обработчики кликов как на круге, так и на поле.
  • Круг находится внутри коробки.
  • Когда я щелкаю по полю, он регистрирует щелчок по полю.
  • Когда я нажимаю на круг, он регистрирует ОБА щелчок по окну и кругу.

event.stopPropagation() и event.cancelBubbles=true не работают, если только я не использую их неправильно.

Как я могу избежать регистрации щелчка по полю при нажатии на кружок?

HTML

<div class="container">
  <div class="box">
    <div class="circle"></div>
  </div>
</div>

js

const box = document.querySelector('.box');
const circle = document.querySelector('.circle');

const handleBox = (e) => {
  e.stopPropagation();
  e.cancelBubble = true;
  console.log('box clicked');
};

const handleCircle = (e) => {
  e.stopPropagation();
  e.cancelBubble = true;
  console.log('circle clicked');
}

box.addEventListener('click', handleBox);
circle.addEventListener('mousedown', handleCircle);

javascript event-handling mouseevent stoppropagation
person wongz    schedule 28.01.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Ваш код прослушивает щелчок по полю, но мышь по кругу.

Из-за этого круг получает щелчок, не может его поймать и передает его в коробку.

Исправление: измените это:

circle.addEventListener('mousedown', handleCircle);

к этому:

circle.addEventListener('click', handleCircle);
person terrymorse    schedule 28.01.2021
comment
Это было преднамеренно, но я изменил его, чтобы он был последовательным, и это решило проблему. Глупая вещь, которую я упускаю из виду, но большое спасибо! - person wongz; 28.01.2021