右鍵顯示自己的選單欄
阿新 • • 發佈：2019-02-14
這裡主要使用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"> 27let 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 事件 能提供的 各種引數
