这里主要使用H5 中的一个新 属性 contextmenu
话不多说，上代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 .rightMenu{ 7 width: 100px; 8 height: 100px; 9 border: 1px solid black; 10 position: absolute; 11 display: none; 12 } 13 .rightMenu li:hover{ 14 cursor: pointer; 15 } 16 </style> 17 </head> 18 <body> 19 <div class="rightMenu"> 20 <ul> 21 <li>复制</li> 22 <li>粘贴</li> 23 <li>分享</li> 24 </ul> 25 </div> 26 <script type="text/javascript"> 27 let rightMenu = document.querySelector('.rightMenu'); 28 document.addEventListener('contextmenu', ( event ) => { // 监听右键事件 29 event.preventDefault(); // 阻止默认事件 30 rightMenu.style.left = event.clientX + 'px'; // 很幸运的 右键点击提供了一系列的 参数，比如点击的 位置 31 rightMenu.style.top = event.clientY + 'px'; 32 rightMenu.style.display = 'block'; 33 console.log('右键点击'); 34 }) 35 document.addEventListener('click', (event) => { // 任意 左键 点击之后 让菜单消失 36 rightMenu.style.display = 'none'; 37 }) 38 39 let rightMenuLi = document.querySelector('.rightMenu ul'); 40 rightMenuLi.addEventListener('click', function (event) { 41 console.log(event.target.textContent); // 获取点击菜单 上的位置信息 42 }) 43 </script> 44 </body> 45 </html>
很简单，主要就是 contextmenu 事件 能提供的 各种参数
6268
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
