react自定义鼠标右键菜单

我的练习项目用的是ant design pro，直接上代码
项目demo地址 点我打开

import React, { useState, useRef, useEffect } from 'react';
import { message } from 'antd';
import styles from './index.less';
const Index = () => {const [visible, setVisible] = useState<boolean>(false); //菜单显隐藏const contextMenu = useRef<any>(null); //ref// 右键事件监听const _handleContextMenu = (event: any) => {event.preventDefault();setVisible(true);const clickX = event.clientX;const clickY = event.clientY;const screenW = window.innerWidth;const screenH = window.innerHeight;const rootW = contextMenu.current.offsetWidth;const rootH = contextMenu.current.offsetHeight;const right = screenW - clickX > rootW;const left = !right;const top = screenH - clickY > rootH;const bottom = !top;if (right) {contextMenu.current.style.left = `${clickX + 5}px`;}if (left) {contextMenu.current.style.left = `${clickX - rootW - 5}px`;}if (top) {contextMenu.current.style.top = `${clickY + 5}px`;}if (bottom) {contextMenu.current.style.top = `${clickY - rootH - 5}px`;}};const _handleClick = (event: any) => {const wasOutside = !(event.target.contains === contextMenu);// 点击其他位置需要隐藏菜单if (wasOutside) setVisible(false);};const _handleScroll = () => {if (visible) setVisible(false);};useEffect(() => {// 事件监听document.addEventListener('contextmenu', _handleContextMenu);document.addEventListener('click', _handleClick);document.addEventListener('scroll', _handleScroll);return () => {// 组件卸载移除事件监听document.removeEventListener('contextmenu', _handleContextMenu);document.removeEventListener('click', _handleClick);document.removeEventListener('scroll', _handleScroll);};}, []);// 菜单事件处理const menuHandle = (type: number) => {message.success(`点击了菜单${type}`);setVisible(false);};console.log(visible, '----------visible');return (visible && (<div ref={contextMenu} className={styles.contextMenu}><div className={styles.menuList} onClick={() => menuHandle(1)}>菜单1</div><div className={styles.menuList} onClick={() => menuHandle(2)}>菜单2</div><div className={styles.menuList} onClick={() => menuHandle(3)}>菜单3</div><div className={styles.menuList} onClick={() => menuHandle(4)}>菜单4</div></div>));
};export default Index;

react自定义鼠标右键菜单相关推荐

如何在canvas画布上自定义鼠标右键菜单内容？
用户大大提了一个需求,想要在画布上能够右键快捷点击使用某个功能,小菜鸟肯定要满足啊(委屈脸),然后靠着强大的各路神仙,写下了如下代码,终于实现了,为自己放个烟花~~~不喜勿喷哦~ 1.自定义鼠标右键菜 ...
JQuery模拟网页中自定义鼠标右键菜单
题外话.......最近在开发一个网站项目的时候,需要用到网页自定义右键菜单,在网上看了各路前辈大神的操作,头晕目眩,为了达到目的,突然灵机一动,于是便有了这篇文章. 先放个效果图(沾沾自喜,大神勿喷 ...
html 元素允许右键,JavaScript 自定义html元素鼠标右键菜单功能
自定义html元素鼠标右键菜单实现思路在触发contextmenu事件时,取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象,来确定鼠标的点击位置,作为显示菜单的left和top值 ...
前端自定义网页鼠标右键菜单
//监听全局上下文菜单 document.addEventListener('contextmenu', function(e){//阻止默认e.preventDefault()//自定义鼠标右键菜单 ...
自定义html页面鼠标右键,javascript鼠标右键菜单自定义效果
本文实例讲解了javascript鼠标右键菜单的实现方法,分享给大家供大家参考,具体内容如下效果图: 具体代码: #menu{ border:solid 1px gray; width:100px; ...
稳扎稳打Silverlight(29) - 2.0Tip/Trick之Cookie, 自定义字体, 为程序传递参数, 自定义鼠标右键...
[索引页] [源码下载] 稳扎稳打Silverlight(29) - 2.0Tip/Trick之Cookie, 自定义字体, 为程序传递参数, 自定义鼠标右键, 程序常用配置参数作者:webabcd ...
openlayer右键菜单_使用OpenLayers3 添加地图鼠标右键菜单
添加右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 contextmenu,当鼠标在 html 元素之上,点击鼠标右键,便会触发 contextmenu 事件,在 context ...
Flex自定义鼠标右键
这里写了一个简单的自定义鼠标右键,代码不难,请看注释其它的请大家参看官方文档 ContextMenu类 ContextMenuItem类源码: <?xml version=&q ...
关于电脑注册表regedit自定义管理右键菜单选项实例（删除增加）
前言:删除电脑多余右键菜单的具体操作所有关于电脑的操作都可以通过修改注册表来实现.而随着电脑软件的安装,本就为方便人们操作的右键菜单变的愈来愈臃肿.但我们可以自定义管理大多数右键菜单,这篇帖子就是为 ...
陈表达VBA学习笔记-新建工作表鼠标右键菜单按钮
陈表达VBA学习笔记-新建工作表鼠标右键菜单按钮:新建一个我的菜单按钮设置对应的宏过程名称为 [我的菜单宏] 点击按钮弹窗信息,信息可自定义设置详细代码如下: Sub 新建右键菜单()Dim 菜单 ...

react自定义鼠标右键菜单

react自定义鼠标右键菜单相关推荐

最新文章

热门文章