如何实现Button独立点击？不触发ListItem/Canvas的点击事件

这个问题的核心是事件冒泡——当你点击DOM中的子元素时，点击事件会沿着DOM树向上传播，依次触发所有父元素的onClick回调。要实现点击Button时只触发自身的点击事件，同时不触发ListItem（以及更高层级如Canvas）的点击事件，我们可以通过阻止事件冒泡来解决。

具体解决方案 #

在Button的点击处理函数中调用event.stopPropagation()方法，这个方法会阻止当前事件继续向上传播到父元素，从而避免触发父元素的点击事件。

修改后的完整代码 #

import React from "react";
import ReactDOM from "react-dom";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";

function App() {
  const handleButtonClick = (event) => {
    // 阻止事件向上冒泡，避免触发ListItem及更高层级元素的点击事件
    event.stopPropagation();
    console.log("button click");
  };
  const handleListItemClick = () => {
    console.log("list click");
  };

  return (
    <ListItem button onClick={handleListItemClick}>
      <button onClick={handleButtonClick}>
        get only the button click
      </button>
      <ListItemText primary="without the ListItem click event..." />
    </ListItem>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

额外说明 #

• 如果你的项目中使用的是Material UI的Button组件而非原生<button>，解决方案完全一致，只需在它的onClick处理函数中调用event.stopPropagation()即可。
• 对于Canvas的点击事件，只要Canvas是Button的父级元素（无论层级高低），event.stopPropagation()都会阻止事件传递到Canvas，从而避免触发Canvas的点击事件。

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