事件冒泡JS

Question

我有两个元素，它们在父 g 容器中一个位于另一个之上。多边形 polygon-img and textarea textarea-img，父级 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 节点时会触发拖动事件以及当我点击多边形时，有什么方法可以限制这种行为并使其仅在我点击多边形时触发？

Answer 1

要使我的评论成为答案：

您可以使用 pointer-events CSS 属性有效地使 <textarea> 通过鼠标事件：

pointer-events: none

事件冒泡JS

Event bubling JS

javascript

svg

dom-events

d3.js

reactjs