javascript - MouseEvent用javascript模拟o​​nclick事件

Question

我正在尝试模拟鼠标单击，它正在单击导航栏上的按钮，

但是当点击我侧边栏上的按钮时它不起作用。

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

我曾尝试使用 cancelBubble: true 但它什么也没做。当我记录 MouseEvent 时，我得到：cancelBubble：false。

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

我已经阅读了很多关于 stopPropagation 的内容，但我不知道这是否适用于我的代码。以及把它放在哪里我试图把它放在我的函数中的不同位置，比如 const el 变量，但我得到了错误

我的应用程序是一个反应应用程序。我的点击功能来自香草 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);

反应 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;

标签： javascriptreactjsclickmouseevent