事件冒泡JS答案

【问题标题】：Event bubling JS事件冒泡JS
【发布时间】：2021-08-14 19:29:03
【问题描述】：

我有两个元素，它们在父 g 容器内一个在另一个之上。多边形 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 节点时触发拖动事件以及单击多边形时，有没有办法限制这种行为并使其仅在我单击多边形时触发？

【问题讨论】：

您可以查看拖动事件的target和currentTarget并相应地取消它。
@AKX 的问题是，如果您尝试在这两个节点重叠的地方开始拖动 textarea 位于顶部，并且如果您通过目标取消它，则不会触发拖动事件，是有什么解决方法可以使拖动事件像根本不存在一样通过 textarea？
如果你想让点击通过，你可以在 textarea 上尝试pointer-events: none CSS 样式。
@AKX ty man 这工作了

标签： javascript reactjs svg d3.js dom-events

【解决方案1】：

让我的评论成为答案：

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

pointer-events: none

【讨论】：