事件冒泡JS

Question

我有两个元素，它们在父 g 容器内一个在另一个之上。 polygon polygon-img和 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