событие click всегда срабатывает для родительского элемента, несмотря на то, что stopPropation () был вызван для дочернего элемента

Question

У меня, казалось бы, тривиальная проблема, но я не могу найти причину. Существует минимальная структура html:

<div id="bg">
  <div id="panel"></div>
  <div id="helper"></div>
</div>

Элемент #helper имеет display: none, и при событии mousedown на #panel я установил dipslay: block на # helper.

Проблема вкратце можно описать так: когда я щелкаю внутри элемента #panel, событие щелчка всегда запускается на элементе #bg, несмотря на все попытки остановить распространение события в обработчиках событий на #panel и #helper. Я сделал код, чтобы проиллюстрировать проблему:

https://codepen.io/tony124/pen/LYpQzwx?editors=1111

, когда я нажимаю за пределами #panel, я получаю в консоли:

"onMouseDownBg" "bg" "bg"
"onMouseUpBg" "bg" "bg"
"onClickBg" "bg" "bg"

, чего и следовало ожидать. Однако, когда я нажимаю на #panel, я получаю

"onMouseDownPanel (stop)" "panel" "panel"
"onMouseUpHelper (stop)" "helper" "helper"
"onClickBg" "bg" "bg"

, что я не могу понять почему. Нет даже лога из onMouseDownBg и noMouseUpBg. Как могло случиться событие щелчка?

Answer 1

Речь идет о порядке, в котором вызываются события и действия, происходящие в обработчиках.

1. onMouseDown event:
   • событие потребляется и отменяется # панель.
   • # помощник становится активным
2. onMouseUp событие:
   • событие потребляется и отменяется # помощником.
   • # помощник становится неактивным
3. onClick событие:
   • From MDN :

     Элемент получает событие щелчка, когда указывающее устройство кнопка (например, основная кнопка мыши) нажата и отпущена , когда указатель находится внутри элемента . Если кнопка нажата на одном элементе, а указатель перемещается за пределы элемента до того, как кнопка будет отпущена, событие запускается для самого определенного c элемента-предка, который содержал оба элемента. (выделено мной)

В этом случае наиболее конкретным элементом-предком c будет #bg, поэтому обрабатывает событие щелчка.

---

Чтобы получить желаемый эффект, просто переместите активацию элемента #helper в обработчик onMouseUpPanel

Answer 2

Потому что ваша функция onMouseDownPanel делает <div id="helper"> в качестве блока отображения и когда вы отпускаете кнопку мыши, потому что помощник был виден и из-за позиционирования он запускает onMouseUpHelper и, наконец, все они дочерние элементы bg, которые он вызывает onClickBg