鼠標單擊父元素，但防止其子元素觸發事件

Question

如何使用自然Javascript命令在子元素上定義而不觸發事件，例如.mouseclick = 'no-event'或： .mousedown = 'no-event' ？

因此，它的父級事件將在冒泡之前獲得第一個事件，父級元素事件將得到e。 target = e.currentTarget

我需要對某些特定的子元素執行此操作，而對某些子元素則不需要。

在父元素上，“捕獲”沒有給出如上所述的正確行為。

我在網絡上遵循的所有其他解決方案都提供了許多無法正常工作的“棘手”解決方案。

Answer 1

var parentEl = document.getElementById('parent');
var childEl = document.getElementById('child');

parentEl.addEventListener('click', function(event) {

}, true)
childEl.addEventListener('click', function(event) {

}, true)

If you pass the true on eventListener it stops the event from bubbling.

Answer 2

您可以給孩子們一個自定義類，該類確定它是否應單擊。 在其父容器的回調函數中，檢查目標正在使用哪個類並采取相應的措施。

這是一個例子：

 document.getElementById("container").addEventListener('click', function(e) { if (e.target.className == "clickable") { console.log("I should do something!"); } else { console.log("I should NOT do something!"); } }); 

 <div id="container"> <div class="clickable"> this is clickable </div> <div> this is not clickable </div> </div>