Javascript 事件bubling JS

在父g容器中有两个元素，一个在另一个之上。 polygon和textarea，父g容器附带了一个d3.js拖动处理程序，代码如下

useEffect(() => {
  const zoneNode = zoneRef.current;
  let dragBehavior;
  if (isEditing && !isPlacingText && !zone.isEditingText) {
    dragBehavior = d3.drag().on("drag", zoneDrag).on("end", zoneDragEnd);
  } else {
    dragBehavior = d3.drag().on("drag", null).on("end", null);
  }
  d3.select(zoneNode).datum(position).call(dragBehavior);
}, [isEditing, isPlacingText, zone]);

---

单击textarea dom节点时会触发拖动事件，单击多边形时也会触发拖动事件，是否有任何方法限制此行为并使其仅在单击多边形时触发？

要回答我的评论：

您可以使用CSS属性有效地使鼠标事件通过

：

pointer-events: none

---

您可以查看拖动事件的

目标

和

当前目标

，并相应地取消它。@AKX问题是，如果您试图在这两个节点重叠的地方开始拖动，文本区域位于顶部，并且由于通过目标取消拖动事件，因此不会触发拖动事件，是否有任何解决方法可以使拖动事件通过文本区域，就像它根本不在文本区域一样？如果您想让它通过单击，可以在文本区域上尝试

指针事件：none

CSS样式。@AKX ty man这行得通