Question

这是我的HTML代码

<table>
<tr>
  <td onclick="messageParent();">PARENT
  <div onclick="messageChild();">
  CHILD DIV
  </div>
  </td>
</tr>

这是我的Javascript

    function messageParent(){
   alert('Parent Message');
         }

function messageChild(){
   alert('Child Message');
         }

CodePen Link

单击“父级”时，我调用函数messageParent()。
单击CHILD DIV时，我调用函数messageChild()。

但是问题是，当我单击Child Div时，它也称为messsageParent()。（显示两个警报）
单击子元素时可以阻止父元素的功能吗？

Answer 1

在事件上调用stopPropagation，以防止事件冒泡到事件的父事件。请注意，在大多数情况下，应使用addEventListener附加事件监听器-内联处理程序通常被认为是不好的做法，并且可能难以管理。（使用内联处理程序，您只能通过引用window.event（即deprecated）来获取事件）

document.querySelector('div').addEventListener('click', (e) => {
  console.log('child');
  e.stopPropagation();
});
document.querySelector('td').addEventListener('click', () => {
  console.log('Parent Message');
});

<table>
  <tr>
    <td>PARENT
      <div>
        CHILD DIV
      </div>
    </td>
  </tr>
</table>

Answer 2

您必须停止通过Event.stopPropagation()向家长鼓吹活动

function messageParent(){
  alert('Parent Message');
}

function messageChild(e){
  e.stopPropagation();
  alert('Child Message');
}

<table>
<tr>
  <td onclick="messageParent();">PARENT
  <div onclick="messageChild(event);">
  CHILD DIV
  </div>
  </td>
</tr>

Answer 3

您可以使用

event.stopPropagation()

Reference

防止子元素的父元素功能onclick

3 个答案: