MouseEvent用javascript模拟onclick事件

我试着模拟鼠标点击，它正在点击导航栏上的一个按钮

但是，当它来点击我的侧栏上的按钮，它不工作

我的按钮在侧栏是一个嵌套很深的按钮，我觉得这就是问题所在

我曾尝试使用cancelBubble：是的，但它没有任何作用。 当我记录MouseEvent时，我得到：cancelBubble:false

当我放置气泡时：false导航栏上的点击事件不起作用

我读了很多关于stopPropagation的文章，但我不知道这在我的代码中是否有效。 我试着把它放在函数中不同的地方，比如 const el变量，但我得到了错误

我的应用程序是react应用程序。 我的click函数来自vannilla javascript脚本。 有人能给我指出正确的方向吗

提前谢谢

click.js javascript单击函数

      function click(x, y) {
        const ev = new MouseEvent("click", {
          view: window,
          bubbles: true,
          //cancelBubble:true,
          cancelable: true,
          screenX: x,
          screenY: y,
        });

        const el = document.elementFromPoint(x, y);
        console.log(el); //print element to console
        if (el !== null || undefined) el.dispatchEvent(ev);
      }
      click(x,y);

react APP.js

function App(props) {
  const [sidebarIsOpen, setSidebarIsOpen] = useState(false);
  // useSelector a function that brings us Redux store
  const cart = useSelector((state) => state.cart);
  const { cartItems } = cart;

  const productCategoryList = useSelector((state) => state.productCategoryList);
  const {
    loading: loadingCategories,
    error: errorCategories,
    categories,
  } = productCategoryList;

  const userSignin = useSelector((state) => state.userSignin);
  const { userInfo } = userSignin;

  const dispatch = useDispatch();

  const signoutHandler = () => {
    dispatch(signout());
  };

  useEffect(() => {
    dispatch(listProductCategories());
  }, [dispatch]);

  return (
    <>
      <BrowserRouter>
        <div className="grid-container">
          <header className="row">
           //THIS WORKS WHEN CLICK
           //WHEN CLICK I GET BACK THIS:<i className="fa fa-bars">...</i>
            <div>
              <button
                type="button"
                className="open-sidebar"
                onClick={() => (
                  console.log("open sidebare"), setSidebarIsOpen(true)
                )}
              >
                <i className="fa fa-bars"></i>
              </button>
              <Link className="brand" to="/">
                Logo
              </Link>
            </div>
            <div>
              <Route
                render={({ history }) => <SearchBox history={history} />}
              />
            </div>
            <div className="div-dropdown">
              <Link to="/search/name">
                Shop
                {cartItems.length > 0 && (
                  <span className="badge">{cartItems.length}</span>
                )}
              </Link>
              <Link to="/cart">
                Cart
                {cartItems.length > 0 && (
                  <span className="badge">{cartItems.length}</span>
                )}
              </Link>
              {userInfo ? (
                <div className="dropdown">
                  <Link to="#">
                    {userInfo.name} <i className="fa fa-caret-down"></i>
                  </Link>
                  <ul className="dropdown-content">
                    <li>
                      <Link to="/profile">User Profile</Link>
                    </li>
                    <li>
                      <Link to="/orderhistory">Order History</Link>
                    </li>
                    <li>
                      <Link to="/" onClick={signoutHandler}>
                        Sign Out
                      </Link>
                    </li>
                  </ul>
                </div>
              ) : (
                <Link to="/signin">Sign In</Link>
              )}
              {userInfo && userInfo.isSeller && (
                <div className="dropdown">
                  <Link to="#seller">
                    Seller <i className="fa fa-caret-down"></i>
                  </Link>
                  <ul className="dropdown-content">
                    <li>
                      <Link to="/productlist/seller">Products</Link>
                    </li>
                    <li>
                      <Link to="/orderlist/seller">Orders</Link>
                    </li>
                  </ul>
                </div>
              )}
              {userInfo && userInfo.isAdmin && (
                <div className="dropdown">
                  <Link to="#admin">
                    Admin <i className="fa fa-caret-down"></i>
                  </Link>
                  <ul className="dropdown-content">
                    <li>
                      <Link to="/dashboard">Dashboard</Link>{" "}
                    </li>
                    <li>
                      <Link to="/productlist">Products</Link>
                    </li>
                    <li>
                      <Link to="/orderlist">Orders</Link>
                    </li>
                    <li>
                      <Link to="/userlist">User</Link>
                    </li>
                  </ul>
                </div>
              )}
            </div>
          </header>
         //WHEN CLICK I GET BACK THIS:<aside className="open">...</aside>
          <aside className={sidebarIsOpen ? "open" : ""}>
            <ul className="categories">
              <li>
                <strong>Categories</strong>
               //THIS DONT WORK WHEN CLICK
                <button
                  className="close-sidebar"
                  type="button"
                  onClick={(e) => setSidebarIsOpen(false)}
                >
                  <i className="fa fa-close"></i>
                </button>
              </li>
              {loadingCategories ? (
                <LoadingBox></LoadingBox>
              ) : errorCategories ? (
                <MessageBox variant="danger">{errorCategories}</MessageBox>
              ) : (
                categories.map((c) => (
                  <li key={c}>
                    <Link
                      to={`/search/category/${c}`}
                      onClick={() => setSidebarIsOpen(false)}
                    >
                      {c}
                    </Link>
                  </li>
                ))
              )}
            </ul>
          </aside>
          <main>
            <Route path="/" component={Home} exact />
            <div className="route-div">
              <Route path="/cart/:id?" component={Cart} />
              <Route path="/product/:id" component={Product} exact />
              <Route
                path="/product/:id/edit"
                component={ProductEdit}
                exact
              />
              <Route path="/register" component={Register} />
              <Route path="/signin" component={Signin} />
            </div>
          </main>
          <footer className="row center">All rights reserved</footer>
        </div>
      </BrowserRouter>
    </>
  );
}

export default App;

功能应用程序（道具）{
const[sidebarIsOpen，setSidebarIsOpen]=使用状态（false）；
//useSelector是一个为我们提供Redux存储的函数
const cart=useSelector（（state）=>state.cart）；
const{cartItems}=cart；
const productCategoryList=useSelector（（state）=>state.productCategoryList）；
常数{
加载：加载类别，
错误：错误类别，
类别，
}=产品类别列表；
const userSignin=useSelector（（state）=>state.userSignin）；
const{userInfo}=usersign；
const dispatch=usedpatch（）；
const signoutHandler=（）=>{
签派（signout（））；
};
useffect（（）=>{
调度（listProductCategories（））；
}，[发送]；
返回(
//这在单击时起作用
//当我点击返回此：。。。
(
console.log（“open sidebare”），setSidebarIsOpen（true）
)}
>
标志
}
/>
商店
{cartItems.length>0&&(
{cartimes.length}
)}
运货马车
{cartItems.length>0&&(
{cartimes.length}
)}
{userInfo(
{userInfo.name}


用户配置文件


订单历史


退出


) : (
登录
)}
{userInfo&&userInfo.isSeller&&(
卖方


产品


命令


)}
{userInfo&&userInfo.isAdmin&&(
管理


仪表板{“}


产品


命令


使用者


)}
//当我点击返回此：。。。


类别
//单击时此选项不起作用
setSidebarIsOpen（假）}
>

{加载类别(
)：错误类别(
{errorCategories}
) : (
类别.地图（（c）=>(

setSidebarIsOpen（假）}
>
{c}

))
)}

版权所有
);
}
导出默认应用程序；