如何防止子元素执行 onmousedown 事件

Question

我在页面上有以下标记

<div id="box">
    <div id="box_child_one"></div>
    <div id="box_child_two"></div>
    <div id="box_child_three"></div>
</div>

我需要在#box div 内的所有元素上触发onmousedown事件，所以我得到了这个 javascript 代码：

var element = "#box";
document.querySelector(element).onmousedown = function() {
    alert("triggered");
};

但是，我不希望在#box_child_three元素上触发 onmousedown。 我怎样才能做到这一点？

谢谢你。

Answer 1

检查event.target以找出实际点击了哪个元素。

 var element = "#box"; document.querySelector(element).onmousedown = function(e) { if (e.target.id;== "box_child_three") { alert("triggered"); } };

 <div id="box"> <div id="box_child_one">one</div> <div id="box_child_two">two</div> <div id="box_child_three">three</div> </div>

Answer 2

当单击元素三时，您需要为stopPropagation ，这样它就不会冒泡到父 ( box ) 元素。

 document.getElementById('box').addEventListener('click', () => alert('triggered') ); document.getElementById('box_child_three').addEventListener('click', e => e.stopPropagation() );

 <div id="box"> <div id="box_child_one">one</div> <div id="box_child_two">two</div> <div id="box_child_three">three</div> </div>

Answer 3

<div id="box">
    <div id="box_child_one" trigger></div>
    <div id="box_child_two" trigger></div>
    <div id="box_child_three"></div>
</div>

<script>
document.querySelector('#box').onclick = function(e){
  if(e.target.hasAttribute('trigger')){
    alert('event fired')
  }
}
</script>

为此，我会选择 go。 因为您现在不再依赖 id 来执行此操作，从而使其更可重用