示例

设计思路：

禁用原始鼠标右键菜单；
使用 HTML 元素搭建一个菜单列表，并响应鼠标点击事件。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>Custom Context Menu</title><style type="text/css">* {box-sizing: border-box;margin: 0;padding: 0;}body {background-color: gainsboro;}.context-menu {background-color: rgba(240, 240, 240, 1);border-color: rgba(0, 0, 0, 0.4);border-style: solid;border-width: 1px;box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);padding: 4px;position: fixed;width: 200px;}.context-menu-item {--height: 30px;cursor: pointer;height: var(--height);line-height: var(--height);list-style: none;padding-left: 5px;vertical-align: middle;transition-duration: 0.8s;transition-property: background-color;user-select: none;}.context-menu-item:hover {background-color: rgba(255, 255, 255, 1);}p {margin: 10px;}</style></head><body><p><span>The oncontextmenu property of the GlobalEventHandlers mixin is an event handler that processes contextmenu events.</span><br><span>The contextmenu event typically fires when the right mouse button is clicked on the window. Unless the default behavior is prevented, the browser context menu will activate.</span></p><p><span>The onmouseup property of the GlobalEventHandlers mixin is an event handler that processes mouseup events.</span><br><span>The mouseup event fires when the user releases the mouse button.</span></p><p><span>In an HTML document, the document.createElement() method creates the HTML element specified by tagName, or an HTMLUnknownElement if tagName isn't recognized.</span></p></body><script type="text/javascript">// 鼠标左、右键标志，参考：https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEventconst MOUSE_LEFT_BUTTON = 0const MOUSE_RIGHT_BUTTON = 2window.onload = (event) => {console.log(event);main();}function main() {let menu = null;window.oncontextmenu = (event) => { // 禁用原始鼠标右键菜单// console.log(event);// event.preventDefault();return false;}document.onmouseup = (event) => {console.log(event);// console.log(event.clientX, event.clientY);if(event.button === MOUSE_RIGHT_BUTTON) { // 鼠标右键if(menu !== null) {document.body.removeChild(menu); // 移除菜单}menu = document.createElement("ul"); // 菜单menu.className = "context-menu";menu.style.top = event.clientY + "px";menu.style.left = event.clientX + "px";const item0 = document.createElement("li"); // 菜单子项 0item0.innerText = "个性化";item0.className = "context-menu-item";const item1 = document.createElement("li"); // 菜单子项 1item1.innerText = "显示设置";item1.className = "context-menu-item";menu.appendChild(item0); // 添加菜单子项menu.appendChild(item1);document.body.appendChild(menu); // 添加（展现）菜单} else if(event.button === MOUSE_LEFT_BUTTON) { // 鼠标左键if(menu !== null) {document.body.removeChild(menu); // 移除菜单menu = null;}const target = event.target; // 获取被鼠标左键点击的目标if(target.className === "context-menu-item") {alert(target.innerText);}}}document.onmousedown = (event) => {// console.log(event);}}</script>
</html>

参考

js鼠标右键点击事件

Web technology for developers > Web APIs > GlobalEventHandlers > GlobalEventHandlers.oncontextmenu

Web technology for developers > Web APIs > GlobalEventHandlers > GlobalEventHandlers.onmouseup

Web technology for developers > Web APIs > Document > Document.createElement()

Web technology for developers > Web APIs > Node > Node.removeChild()

Web technology for developers > Web APIs > HTMLElement > HTMLElement.style

Web technology for developers > Web APIs > Node > Node.appendChild()

Web technology for developers > Web APIs > MouseEvent > MouseEvent()

Web technology for developers > HTML: HyperText Markup Language > HTML elements reference > ul: The Unordered List element

Web technology for developers > Web APIs > HTMLUListElement

Web technology for developers > HTML: HyperText Markup Language > HTML elements reference > li: The List Item element

Web technology for developers > Web APIs > HTMLLIElement

Web technology for developers > CSS: Cascading Style Sheets > list-style

Web technology for developers > Web APIs > Element > Element.className

Web technology for developers > CSS: Cascading Style Sheets > transition

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

如何在canvas画布上自定义鼠标右键菜单内容？
用户大大提了一个需求,想要在画布上能够右键快捷点击使用某个功能,小菜鸟肯定要满足啊(委屈脸),然后靠着强大的各路神仙,写下了如下代码,终于实现了,为自己放个烟花~~~不喜勿喷哦~ 1.自定义鼠标右键菜 ...
JQuery模拟网页中自定义鼠标右键菜单
题外话.......最近在开发一个网站项目的时候,需要用到网页自定义右键菜单,在网上看了各路前辈大神的操作,头晕目眩,为了达到目的,突然灵机一动,于是便有了这篇文章. 先放个效果图(沾沾自喜,大神勿喷 ...
JavaScript禁用鼠标右键菜单
document.oncontextmenu = function(){return false; }
html 元素允许右键,JavaScript 自定义html元素鼠标右键菜单功能
自定义html元素鼠标右键菜单实现思路在触发contextmenu事件时,取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象,来确定鼠标的点击位置,作为显示菜单的left和top值 ...
自定义html页面鼠标右键,javascript鼠标右键菜单自定义效果
本文实例讲解了javascript鼠标右键菜单的实现方法,分享给大家供大家参考,具体内容如下效果图: 具体代码: #menu{ border:solid 1px gray; width:100px; ...
前端自定义网页鼠标右键菜单
//监听全局上下文菜单 document.addEventListener('contextmenu', function(e){//阻止默认e.preventDefault()//自定义鼠标右键菜单 ...
稳扎稳打Silverlight(29) - 2.0Tip/Trick之Cookie, 自定义字体, 为程序传递参数, 自定义鼠标右键...
[索引页] [源码下载] 稳扎稳打Silverlight(29) - 2.0Tip/Trick之Cookie, 自定义字体, 为程序传递参数, 自定义鼠标右键, 程序常用配置参数作者:webabcd ...
openlayer右键菜单_使用OpenLayers3 添加地图鼠标右键菜单
添加右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 contextmenu,当鼠标在 html 元素之上,点击鼠标右键,便会触发 contextmenu 事件,在 context ...
自定义鼠标右键弹出式菜单
<html> <head> <meta http-equiv="Content-Type" content="tex ...
Leaflet中使用Leaflet.contextmenu插件实现地图上添加鼠标右键菜单
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上,怎样使用Leaflet.co ...

JavaScript - 自定义鼠标右键菜单

文章目录

示例

参考

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

最新文章

热门文章