Question

我正在使用材质ui的tree组件，该组件是一堆嵌套的treeItem组件。我想在每个树节点上都有一个rightClick事件触发器。我使用onContextMenu这样做，但是，因为我的组件是嵌套的，所以当我右键单击内部组件时，右键事件会触发两次，一次是对我刚刚单击鼠标右键的内部组件，一次是其父组件。有什么想法可以阻止这种情况发生吗？

我的代码：

function Tree( props ) {

  // Recursively generate tree items passed to component
  const renderTree = ( nodes ) => (
    <TreeItem key = {nodes.id} nodeId = {nodes.id} label = {nodes.name} onContextMenu = {rightClick}>
      {Array.isArray( nodes.children ) ? nodes.children.map( (node) => renderTree(node) ) : null}
    </TreeItem>
  )

  const rightClick = (event) => {
    event.preventDefault();
    alert("LOL")
  }

  return (
    <div>
    <TreeView
      defaultCollapseIcon = {<ExpandMoreIcon />}
      defaultExpandIcon = {<ChevronRightIcon />}
      multiSelect>
      {renderTree( props.treeItems )}
    </TreeView>
    </div>
  );
}

Answer 1

您还可以通过停止DOM的传播来停止使DOM冒泡的事件。

stopPropagation()界面的 Event 方法可防止进一步在捕获和冒泡阶段传播当前事件。但是，它不能防止任何默认行为的发生；例如，对链接的点击仍在处理中。如果你想停下来这些行为，请参见preventDefault()方法。

const rightClick = (event) => {
  event.preventDefault();
  event.stopPropagation()
  alert("LOL")
}

右键单击嵌套组件触发两次反应

1 个答案: