javascript - 拖动它的 child 时如何避免拖动 parent ？

Question

我已经添加到我的 React 应用程序导航栏中，用户可以拖动项目和替换位置。 (工作正常!)

现在我正在尝试递归地呈现导航树，因此可以拖动和替换内部导航(无需重新设置父级)。

递归渲染工作正常，但问题是拖动内部子节点会导致拖动整个父节点。

NodeWrapper.js:

export class NodeWrapper extends Component {
  public render() {
    return (
      <DragList onItemMoved={this.props.onItemMoved}>
        {this.props.navItems
          .map((component, index) => (
            <Node key={`node-${index}`} {...component}/>
          ))}
      </DragList>
    );
  }
}

Node.js:

public render() {
 return (
  <div>
    <span>{this.props.label}</span>
    {this.props.childNodes && (
      <NodeWrapper navItems={this.props.childNodes} />
    )}
  </div>
 );
}

*请注意，DragList 组件确实很大，我认为它与问题无关，如果被问到会添加。基本上它呈现了一个子列表，可以使用事件处理程序拖动它们。

我尝试为拖动事件处理程序添加 event.stopPropagation()，但它仍然捕获并拖动整个父节点。

如何在所有级别之间执行拖动？

Answer 1

在你想要的每个事件监听器的内部子元素上，比如 onDrag 和 onClick 使用 e.stopPropagation()

例如

<div class="wraper">
  <div class="inner" onDrag={(e)=>{e.stopPropagation();//do other sttuf}}></div>
</div>

只需在拖动的内部子事件处理程序中使用 event.stopPropagation()，... 事件监听器

我看不到你的实现来弄清楚你是如何使用拖动事件的。但我猜测你使用了 onItemMoved 属性并将它的值传递给拖动处理程序，所以试试这个

onItemMoved={(e)=> {e.stopPropagation();this.props.onItemMoved()}}