Javascript 右键单击菜单触发其父菜单项的单击事件

我正在尝试向菜单项添加右键单击菜单。我想我成功了，但在右击菜单中点击一个项目后，菜单项的点击动作也启动了。有什么想法吗？例如：

编辑：我的react组件代码

import React from "react";
import ReactDOM from "react-dom";
import Popup from "./Popup";
import Table from "antd/lib/table";
import Dropdown from "antd/lib/dropdown";
import Menu from "antd/lib/menu";
import { columns, data } from "./data";
import "antd/dist/antd.css";

const menu = (
  <Menu>
    <Menu.Item
      onClick={e => {
        alert("clicked");
      }}
    >
      click
    </Menu.Item>
    <Menu.Item>Like it</Menu.Item>
    <Menu.Item>Bookmark</Menu.Item>
  </Menu>
);

class App extends React.Component {
  render() {
    return (
      <div>
        <Menu mode="horizontal">
          <Menu.Item
            key="1"
            onClick={() => {
              alert("parent clicked");
            }}
          >
            <Dropdown overlay={menu} trigger={[`contextMenu`]}>
              <span style={{ userSelect: "none" }}> right click </span>
            </Dropdown>
          </Menu.Item>
        </Menu>
      </div>
    );
  }
}

const APP_NODE = document.getElementById(`container`);
ReactDOM.render(<App />, APP_NODE);

从“React”导入React；
从“react dom”导入react dom；
从“/Popup”导入弹出窗口；
从“antd/lib/Table”导入表；
从“antd/lib/Dropdown”导入下拉列表；
从“antd/lib/Menu”导入菜单；
从“/data”导入{columns，data}”；
导入“antd/dist/antd.css”；
常量菜单=(
{
警报（“点击”）；
}}
>
点击
喜欢吗
书签
);
类应用程序扩展了React.Component{
render（）{
返回(
{
警报（“家长点击”）；
}}
>
右击
);
}
}
const APP_NODE=document.getElementById（`container`）；
ReactDOM.render（，APP_节点）；

您需要停止在子元素上传播，因为在JavaScript中，单击事件会在DOM树上冒泡

const menu = (
  <Menu>
    <Menu.Item
      onClick={e => {
         e.domEvent.stopPropagation();
         alert("clicked");
      }}
      click
    </Menu.Item>
    <Menu.Item >Like it</Menu.Item>
    <Menu.Item>Bookmark</Menu.Item>
  </Menu>
);

const菜单=(
{
e、 domEvent.stopPropagation（）；
警报（“点击”）；
}}
点击
喜欢吗
书签
);

您需要在事件对象上调用stopPropagation，因为默认情况下，事件的气泡会出现在DOM树上。为什么不直接在此处发布示例代码？谢谢，它非常有用。我只是好奇

e.domEvent

的用法。许多人直接从

e

调用

stopPropagation

，但它对我不起作用。它是关于antd的吗？@rdonuk它只是在

antd

中，在您使用的纯反应

e.stoppropagion（）

中，我首先尝试了一下，以确保它在您的示例中起作用，而不是，因此我检查了

e

对象并找到了

domEvent

。它可能在lib文档中。