在window中單擊右鍵或在Mac中Ctrl+單擊時會觸發contextmenu事件，通過取消其默認動作能夠提供自己定義菜單。
首先先寫一個自己的菜單：

<style>ul, li {margin: 0;padding: 0;}#myMenu{list-style: none;width: 150px;border: 1px solid #ccc;border-bottom: none;position: absolute;display: none;}#myMenu li{border-bottom: 1px solid #ccc;padding: 5px 10px;cursor: pointer;}#myMenu li:hover{background-color: #ccc;}</style> <ul id="myMenu"><li>右鍵想干什么？</li><li>想看源碼？</li><li>還是想審查元素？</li> </ul>

顯示時就是這個樣子：

然后為document加入contextmenu事件，再取消掉其默認事件，讓自己定義菜單顯示出來：

var myMenu = document.getElementById("myMenu"); document.addEventListener("contextmenu", function(event){event.preventDefault();myMenu.style.display = "block";//獲取鼠標視口位置myMenu.style.top = event.clientY + "px";myMenu.style.left = event.clientX + "px"; });

當然，用戶在別的地方單擊記得隱藏菜單：

document.addEventListener("click", function(event){myMenu.style.display = "none"; });

通過給自己定義菜單設置更好看的css將有更好的效果。

總結

以上是生活随笔為你收集整理的HTML5事件——contextmenu 隐藏鼠标右键菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。