JavaScript 自定義html元素鼠標右鍵菜單功能
更新時間：2019年12月02日 13:50:41 作者：授客
這篇文章主要介紹了JavaScript 自定義html元素鼠標右鍵菜單功能，本文通過實例代碼給大家分享實現(xiàn)思路，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
自定義html元素鼠標右鍵菜單
實現(xiàn)思路
在觸發(fā)contextmenu事件時，取消默認行為(也就是阻止瀏覽器顯示自帶的菜單),獲取右鍵事件對象，來確定鼠標的點擊位置，作為顯示菜單的left和top值
編碼實現(xiàn)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
window.onload = function(){
var menu = document.getElementById('menu');
document.body.oncontextmenu = function(e){ // 自定義body元素的鼠標事件處理函數(shù)
var e = e || window.event;
e.preventDefault(); //阻止系統(tǒng)右鍵菜單 IE8-不支持
// 顯示自定義的菜單調(diào)整位置
let scrollTop =
document.documentElement.scrollTop || document.body.scrollTop;// 獲取垂直滾動條位置
let scrollLeft =
document.documentElement.scrollLeft || document.body.scrollLeft;// 獲取水平滾動條位置
menu.style.display = 'block';
menu.style.left = e.clientX + scrollLeft + 'px';
menu.style.top = e.clientY + scrollTop + 'px';
}
// 鼠標點擊其他位置時隱藏菜單
document.onclick = function(){
menu.style.display = 'none';
}
}
</script>
<style>
*{
margin: 0;
padding: 0;
}
p{
margin-top: 200px;
}
ul li{
list-style-type: none;
margin: 10px 0;
text-align: center;
}
#menu{
border:1px solid #ccc;
background: #eee;
position: absolute; // 設(shè)置菜單為絕對位置
width: 100px;
height: 120px;
display: none;
}
</style>
</head>
<body style="overflow:auto">
<div id="box" style="height:5000px; width:5000px">讓body元素出現(xiàn)滾動條用的div</div>
<div id="menu">
<ul>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >分享</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >收藏</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >舉報</a></li>
</ul>
</div>
</body>
</html>
實現(xiàn)效果
總結(jié)
以上所述是小編給大家介紹的JavaScript 自定義html元素鼠標右鍵菜單功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
解決火狐瀏覽器下JS setTimeout函數(shù)不兼容失效不執(zhí)行的方法
今天檢查自己用JQuery+AJAX+PHP做的網(wǎng)站后臺登錄檢測，愛其他瀏覽器中兼容性還不錯 結(jié)果到了火狐（FireFox）瀏覽器下setTimeout這個JS內(nèi)置函數(shù)不執(zhí)行了，本文將提供詳細的解決方法2012-11-11
在JavaScript中自定義事件的用法是前端開發(fā)中一個較為高級的話題,它允許開發(fā)者創(chuàng)建和觸發(fā)自己的事件,從而達到更好的模塊化和代碼解耦,這篇文章主要介紹了JavaScript中自定義事件的相關(guān)資料,需要的朋友可以參考下2025-04-04
這篇文章主要介紹了JS實現(xiàn)往下不斷流動網(wǎng)頁背景的方法,實例分析了遞歸調(diào)用自定義函數(shù)scrollBG實現(xiàn)動態(tài)背景特效的功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
對JavaScript的eval()中使用函數(shù)的進一步討論
《JavaScript語言精髓與編程實踐》的讀者I22141提出了一問題：為什么下面這段代碼在JScript 和SpiderMonkey中表現(xiàn)不一樣：2008-07-07
這篇文章主要介紹了js實現(xiàn)點擊鏈接后窗口縮小并居中的方法,實例分析了javascript操作窗口的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了JS實現(xiàn)新浪微博效果帶遮罩層的彈出框代碼,涉及JavaScript響應(yīng)鼠標事件動態(tài)操作頁面元素的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
推薦js實現(xiàn)商品分類到搜索欄友好提示（人機交互）
推薦js實現(xiàn)商品分類到搜索欄友好提示（人機交互）...2007-05-05
關(guān)于javascript函數(shù)的幾個話題
關(guān)于javascript函數(shù)的幾個話題...2007-03-03
在Webpack中用url-loader處理圖片和字體的問題
這篇文章主要介紹了在Webpack中用url-loader處理圖片和字體的問題及解決方法，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
JavaScript數(shù)據(jù)類型轉(zhuǎn)換的注意事項
JavaScript是一種無類型語言，但同時JavaScript提供了一種靈活的自動類型轉(zhuǎn)換的處理方式?；疽?guī)則是，如果某個類型的值用于需要其他類型的值的環(huán)境中，JavaScript就自動將這個值轉(zhuǎn)換成所需要的類型。2016-07-07