[JavaScript知识库]react自定义右键事件

右键显示弹窗

  const handleContextMenu = (e) => {
    e.preventDefault()
    // 此条件下才展示弹窗
    if (e.target.nodeName === "DIV" && e.target.innerText !== "首页") {
      const x = e.clientX
      const y = e.clientY
      // 弹窗节点
      const rightMenu = document.getElementsByClassName("rightMenu")[0]
      rightMenu.style.display = "block"
      rightMenu.style.left = x - 200 + "px" //设置弹窗位置
      rightMenu.style.top = y - 30 + "px"
      document.onclick = function () { //点击其他区域要隐藏弹窗
        rightMenu.style.display = "none"
      }
    }
  }

//在需要右键的dom处添加右键监听事件

  useEffect(() => {
    // 右键事件监听
    const tabDom = document.getElementsByClassName("ant-tabs")[0]
    tabDom.addEventListener("contextmenu", handleContextMenu)
    return () => {
      // 组件卸载移除事件监听
      tabDom.removeEventListener("contextmenu", handleContextMenu)
    }
  }, [])

渲染右键弹出列表

  const getRightMenuBtns = () => {
    const btns = [
      {
        text: "关闭左侧",
        key: "left",
        handleClick: handleCloseTab,
      },
      {
        text: "关闭右侧",
        key: "right",
        handleClick: handleCloseTab,
      },
      {
        text: "关闭其它",
        key: "orther",
        handleClick: handleCloseTab,
      },
    ]
    const res = btns.map((item) => {
      return (
        <li onClick={() => item.handleClick(item.key)} key={item.key}>
          {item.text}
        </li>
      )
    })

    return [...res]
  }

  <div className="rightMenu" style={{ display: "none" }}>
        <ul className="up">{getRightMenuBtns()}</ul>
      </div>

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖