React与原生JS中父子标签点击事件独立触发处理求助

这个问题其实是**事件冒泡（Event Bubbling）**搞的鬼——DOM元素的事件会从触发的子元素开始，沿着DOM树向上冒泡到父元素，所以你点击子标签时，父标签的点击事件也会被连带触发。下面分原生JavaScript和React两种场景，给你具体的解决办法：

有两种常用的思路可以解决这个问题：

方法1：阻止事件冒泡 #

给子元素的点击事件添加event.stopPropagation()方法，直接阻止事件向上传播到父元素。修改你的代码如下：

<div onClick="console.log('div tag click event fired')">
  <h1 onClick="(e) => { e.stopPropagation(); console.log('h1 tag click event fired') }">This is a Heading</h1>
  <p onClick="(e) => { e.stopPropagation(); console.log('p tag click event fired') }">This is a paragraph.</p>
</div>

这样点击h1或p时，它们的事件会触发，同时不会把事件传递给父级的div，也就不会触发div的点击事件了。

方法2：判断事件触发的目标元素 #

如果你不想完全阻止事件冒泡（比如还有其他上层元素需要监听事件），可以在父元素的点击事件里，判断实际触发事件的是不是父元素本身：

<div onClick="(e) => { if(e.target === e.currentTarget) console.log('div tag click event fired') }">
  <h1 onClick="console.log('h1 tag click event fired')">This is a Heading</h1>
  <p onClick="console.log('p tag click event fired')">This is a paragraph.</p>
</div>

这里event.target是实际被点击的元素，event.currentTarget是绑定了点击事件的元素（也就是这个div）。只有当两者相等时，才说明点击的是div本身，而不是它的子元素，这时候再执行父元素的逻辑。

React的合成事件同样遵循事件冒泡机制，解决思路和原生类似，但写法更贴合React组件的开发习惯：

方法1：在子元素事件中阻止冒泡 #

以函数组件为例，给子元素的点击事件处理函数添加e.stopPropagation()：

import React from 'react';

function ParentComponent() {
  const handleDivClick = () => {
    console.log('div tag click event fired');
  };

  const handleH1Click = (e) => {
    e.stopPropagation();
    console.log('h1 tag click event fired');
  };

  const handlePClick = (e) => {
    e.stopPropagation();
    console.log('p tag click event fired');
  };

  return (
    <div onClick={handleDivClick}>
      <h1 onClick={handleH1Click}>This is a Heading</h1>
      <p onClick={handlePClick}>This is a paragraph.</p>
    </div>
  );
}

export default ParentComponent;

方法2：在父元素事件中校验触发目标 #

同样可以在父元素的点击事件里，判断触发源是不是父元素本身，避免子元素触发父事件：

import React from 'react';

function ParentComponent() {
  const handleDivClick = (e) => {
    // 只有点击div本身时才执行逻辑
    if (e.target === e.currentTarget) {
      console.log('div tag click event fired');
    }
  };

  const handleH1Click = () => {
    console.log('h1 tag click event fired');
  };

  const handlePClick = () => {
    console.log('p tag click event fired');
  };

  return (
    <div onClick={handleDivClick}>
      <h1 onClick={handleH1Click}>This is a Heading</h1>
      <p onClick={handlePClick}>This is a paragraph.</p>
    </div>
  );
}

export default ParentComponent;

如果是类组件，写法类似，只需要把事件处理函数定义为类的方法，调用时用this.handleDivClick即可。

内容的提问来源于stack exchange，提问作者ankitkanojia