时间戳

首页 > 解决方案 > 如何检测孩子是否点击了父母点击反应

javascript - 如何检测孩子是否点击了父母点击反应

问题描述

我正在使用 React，我有以下情况。

我有一个带有onClick事件的父 div，它占用全宽，在该 div 内我有一个图像。我希望能够知道它在哪里被点击。因此，我想知道是否单击了图像（子）或 div（父）。

我的代码如下：

class APP extends React.Component {
  constructor(props) {
    super(props)   
  }
  
  render() {
    return (
      <div className="parent" onClick={(e) => console.log("PARENT CLICK")}>
        <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
          style={{maxWidth: "60%", maxHeight: "90%", pointerEvents: 'none', zIndex: 99999}}
          onClick={e => console.log("IMAGE CLICK")}
          />
      </div>
    )
  }
}

ReactDOM.render(<APP />, document.querySelector("#app"))

但它总是检测到父点击。我试图添加z-index到孩子，但我认为孩子不能在父母面前。

这是小提琴。

标签： javascriptreactjs

解决方案

您已在的内联对象中pointerEvents设置为。删除它。也可以去掉。noneimgstylezIndex

来自CSS 技巧：-

pointer-events:none阻止指定 HTML 元素上的所有单击、状态和光标选项

你不需要e.stopPropagation()这里。只需像这样仅在父级上设置事件处理程序（这称为事件委托）：-

class APP extends React.Component {
  constructor(props) {
    super(props)   
  }
  
  handleclick(e){
    console.log(e.target.tagName);
  }  
  render() {
    return (
      <div className="parent" onClick={this.handleclick}>
        <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
          style={{maxWidth: "30%", maxHeight: "30%"}}
          />
      </div>
    )
  }
}

ReactDOM.render(<APP />, document.querySelector("#app"))

推荐阅读