从 <div onclick> 中排除子组件

Question

我渲染了多个 'div'，用户可以通过简单的 onClick 来点击它 select：

<div onClick={() => this.handleTrackerCardClick()}>

不过，用户也可以通过单击按钮来编辑 'div' 上显示的字段。在这种情况下，我不希望调用 'div onClick'，因为显然用户想要使用编辑功能而不是 select 'div'.

参见以下示例：

用户可以点击绿色区域select'div'
如果单击铅笔（红色区域），我不想调用 'div onClick'

这可能吗？

谢谢！

Answer 1

我只是将内部可编辑字段作为“父”字段的同级放置。通过这种方式，您可以为外部 div 和可编辑字段提供点击处理程序，并且在层次结构方面没有重叠。

像这样：

function App() {
  return (
    <div style={{ border: "1px dashed red" }}>
      <div onClick={() => console.log("outer clicked")}>Outer click</div>
      <span
        style={{ border: "1px dashed blue" }}
        onClick={() => console.log("inner clicked")}
      >
        Inner click
      </span>
    </div>
  );
}

查看工作示例here

Answer 2

您可以采用两种方法。

在div

上处理

测试点击是否在编辑功能上

(event) => {
    const div = event.currentTarget;
    const edit = div.querySelector('.edit');
    if (edit === event.target) {
        return;
    }
    return this.handleTrackerCardClick();
}

此代码示例对 DOM 结构进行了假设。根据需要进行调整。其中一个假设是编辑控件是没有子元素的单个元素。如果不是，则您需要测试点击是否也是任何子项。通常，您会从 event.target 开始递归检查 parentNode，直到找到 div 或 edit.

的匹配项

在编辑控件上处理

调用阻止事件向上传播 DOM 并到达 div 的方法。

(event) => {
    event.stopPropagation();
    this.do_edit_thing();
}

从 <div onclick> 中排除子组件

Exclude child components from <div onclick>

html

onclick

reactjs

在div

在编辑控件上处理