使用JavaScript為H5新增右擊事件
阿新 • • 發佈：2018-12-19
話不多說，直接上程式碼，其中需要注意的一點是為menu新增position: absolute;屬性，這個屬性的意思是選單採用絕對位置，可以保證右擊後選單出現在自己想要的位置，而不受其他元素的影響
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>選單</title> <style> #menu{ display: none; width: 50px; border: solid black; position: absolute; background-color: aqua; } #list{ width: 50px; } </style> </head> <body> <ol id="list" style="border: solid red;"> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> <li>列表5</li> </ol> <div id="message"> </div> <!-- 作者：[email protected] 時間：2018-11-05 描述：選單選項 --> <div id="menu"> <a href="#" onclick="alert('選單一')">選單一</a><br/> <a href="#" onclick="alert('選單二')">選單二</a><br/> <a href="#" onclick="alert('選單三')">選單三</a> </div> <script> var menu = document.getElementById("menu"); var list = document.getElementById("list"); var message = document.getElementById("message"); //為list新增右擊事件 list.oncontextmenu = function(e){ var e = e || window.event; var x = e.clientX; var y = e.clientY; message.innerHTML = "x="+x+",y="+y; menu.style.display = "block"; menu.style.left = x + "px"; menu.style.top = y + "px" return false; } //為視窗新增點選事件，當點選list外的區域時，選單消失 document.onclick = function(e){ var e = e || window.event; menu.style.display = "none"; } //點選選單時取消冒泡事件 menu.onclick = function(e){ var e = e || window.event; //IE中取消冒泡事件 //e.cancelBubble = true; //其他瀏覽器取消冒泡事件 e.stopPropagation(); } </script> </body> </html>