js實現(xiàn)右鍵自定義菜單
更新時間：2016年12月03日 10:31:16 作者：代碼小公主
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)右鍵菜單功能,具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了右鍵自定義菜單的具體代碼，供大家參考，具體內容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#menu {
height: 200px;
width: 50px;
border: 1px solid gray;
background-color: antiquewhite;
padding: 10px;
display: none;
position: absolute;
}
ul,
li {
margin: 0;
padding: 0;
list-style-type: none;
line-height: 40px;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>復制</li>
<li>粘貼</li>
<li>運行</li>
<li>工具</li>
<li>幫助</li>
</ul>
</div>
</body>
<script type="text/javascript">
var menu = document.getElementById("menu");
document.oncontextmenu = function(ev) {
var oEvent = ev || event;
//自定義的菜單顯示
menu.style.display = "block";
//讓自定義菜單隨鼠標的箭頭位置移動
menu.style.left = oEvent.clientX + "px";
menu.style.top = oEvent.clientY + "px";
//return false阻止系統(tǒng)自帶的菜單，
//return false必須寫在最后，否則自定義的右鍵菜單也不會出現(xiàn)
return false;
}
//實現(xiàn)點擊document，自定義菜單消失
document.onclick = function() {
menu.style.display = "none";
}
</script>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要給大家介紹了關于怎么使用js計算當前一周的日期的相關資料,我們可以使用JavaScript的Date對象來獲取近一周的日期,文中給出了詳細的代碼示例,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了JS實現(xiàn)的類似微信聊天效果,可實現(xiàn)模擬微信聊天效果的對話框信息傳輸,涉及javascript事件響應及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2019-01-01
服務器安全設置的幾個注冊表設置...2007-07-07
本篇文章主要介紹了Dropify.js圖片寬高自適應的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
JavaScript實現(xiàn)獲取最近7天的日期的方法詳解
這篇文章主要想和大家分享一些JavaScript開發(fā)中會用到的小技巧，本文主要介紹了js獲取最近7天的日期，判斷當前日期時間大于指定日期時間等內容，需要的可以參考一下2023-04-04
javascript中直接引用Microsoft的COM生成Word
直接引用Microsoft的COM是可以生成Word的，下面為大家介紹下實現(xiàn)的javascript代碼2014-01-01
這篇文章主要介紹了javascript 兼容各個瀏覽器的事件,需要的朋友可以參考下2015-02-02
用canvas 實現(xiàn)個圖片三角化（LOW POLY）效果
這篇文章主要介紹了用canvas 實現(xiàn)個圖片三角化（LOW POLY）效果 的相關資料,需要的朋友可以參考下2016-02-02
這篇文章主要介紹了JS Ajax請求會話過期處理問題解決方法,結合實例形式簡單分析了ajax請求會話過期處理的相關原理、解決方法及操作注意事項,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了JS如何生成一個不重復的ID的函數(shù)，非常不錯，具有參考借鑒價值，需要的朋友參考下2016-12-12