MDUI 实现右击菜单弹出菜单栏 作者: Chuwen 时间: 2020-03-16 分类: HTML5 # 更新记录 > 03/17 00:12：解决滚动页面后右击菜单栏出现在顶部。解决办法将 `e.clientY` 换成 `e.pageY` 在线预览：https://nowtime.cc/mdui/contextmenu.html 核心 JavaScript 代码： ``` var $$ = mdui.JQ; //监听鼠标右击事件 / 移动端长按事件 $$(document).on('contextmenu', function (e) { // console.log(e); //0：移动端长按（iOS 测试未通过） //2：电脑端右键 if(e.button === 2 || e.button === 0) { e.preventDefault();//阻止冒泡，阻止默认的浏览器菜单 //（修改了这里）鼠标点击位置，相对于页面 var _x = e.pageX, _y = e.pageY; let $div = $$("<div></div>").css({ position: 'absolute', top: _y+'px', left: _x+'px', }); $$('body').append($div);//创建临时DOM // anchorSelector 表示触发菜单的元素的 CSS 选择器或 DOM 元素 // menuSelector 表示菜单的 CSS 选择器或 DOM 元素 // options 表示组件的配置参数，见下面的参数列表 // 完整文档列表：https://doc.nowtime.cc/mdui/menu.html var inst = new mdui.Menu($div, '#menu'); inst.open();//打开菜单栏 $div.remove();//销毁创建的临时DOM } }); ``` --- # 完整 HTML代码 <!--more--> ``` <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>MDUI 鼠标右击弹出菜单</title> <link rel="stylesheet" href="https://cdnjs.loli.net/ajax/libs/mdui/0.4.3/css/mdui.min.css"> <script src="https://cdnjs.loli.net/ajax/libs/mdui/0.4.3/js/mdui.min.js"></script> </head> <body> <h1>鼠标右击任何地方，或者移动端长按（不一定有用），看看效果</h1> <h2>原文链接：<a href="https://nowtime.cc/html5/897.html" target="_blank">https://nowtime.cc/html5/897.html</a></h2> <ul class="mdui-menu" id="menu"> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple">Refresh</a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple">Settings</a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple">Send feedback</a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple">Help</a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple">Signout</a> </li> </ul> <script> var $$ = mdui.JQ; //监听鼠标右击事件 / 移动端长按事件 $$(document).on('contextmenu', function (e) { // console.log(e); //0：移动端长按（iOS 测试未通过） //2：电脑端右键 if(e.button === 2 || e.button === 0) { e.preventDefault();//阻止冒泡，阻止默认的浏览器菜单 //鼠标点击位置，相对于浏览器 var _x = e.pageX, _y = e.pageY; let $div = $$("<div></div>").css({ position: 'absolute', top: _y+'px', left: _x+'px', }); $$('body').append($div);//创建临时DOM // anchorSelector 表示触发菜单的元素的 CSS 选择器或 DOM 元素 // menuSelector 表示菜单的 CSS 选择器或 DOM 元素 // options 表示组件的配置参数，见下面的参数列表 // 完整文档列表：https://doc.nowtime.cc/mdui/menu.html var inst = new mdui.Menu($div, '#menu'); inst.open();//打开菜单栏 $div.remove();//销毁创建的临时DOM } }); </script> <footer> <span>Copyright © 2017 ~ 2020 <a href="https://nowtime.cc/" title="现在工具网-NowTool.cn">现在网</a>. All Rights Reserved.</span> </footer> </body> </html> ``` 标签: JavaScript, MDUI