如何防止子元素執行 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 來執行此操作，從而使其更可重用