防止父元素点击事件在点击子下拉菜单时触发

Question

• 我有一个可点击的父元素。作为子元素，我有一个下拉菜单。当我点击这个下拉菜单时，它也会触发父元素。
• table 元素动态呈现为行，因此我想通过 Id 而不是 class 来定位元素。
• 我试过 e.stopPropagation() 但它阻止了下拉菜单的切换。
• 非常感谢您的帮助！

document.getElementById("entirerow"+doc.id).addEventListener("click", function(e){
  alert("Entire row clicked")
})

document.getElementById("dropdown"+doc.id).addEventListener("click", function(e){
  alert("Only button clicked")
  //e.stopPropagation(); I have tried this but it prevents the dropdown from triggering at all.
})

<tr id="entirerow"+doc.id>
  <td>
  <span>
    <button id="dropdown"+doc.id>myDropdown</button>
  </span>
  </td>
  <td>
    ...
  </td>
</tr>

Answer 1

如果事件目标是下拉列表，您可以 return 在父侦听器回调的早期。

document.getElementById("entirerow"+doc.id).addEventListener("click", function(e){
  if(e.target.id === ("dropdown"+doc.id)){
    return;
  }

  alert("Entire row clicked");
})

document.getElementById("dropdown"+doc.id).addEventListener("click", function(e){
  alert("Only button clicked");
})