快捷導(dǎo)航

JavaScript 自定義html元素鼠標(biāo)右鍵菜單功能

更新時(shí)間：2019年12月02日 13:50:41 作者：授客

這篇文章主要介紹了JavaScript 自定義html元素鼠標(biāo)右鍵菜單功能，本文通過(guò)實(shí)例代碼給大家分享實(shí)現(xiàn)思路，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

自定義html元素鼠標(biāo)右鍵菜單

實(shí)現(xiàn)思路

在觸發(fā)contextmenu事件時(shí)，取消默認(rèn)行為(也就是阻止瀏覽器顯示自帶的菜單),獲取右鍵事件對(duì)象，來(lái)確定鼠標(biāo)的點(diǎn)擊位置，作為顯示菜單的left和top值

編碼實(shí)現(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元素的鼠標(biāo)事件處理函數(shù)
    var e = e || window.event;
    e.preventDefault(); //阻止系統(tǒng)右鍵菜單 IE8-不支持
    // 顯示自定義的菜單調(diào)整位置
    let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;// 獲取垂直滾動(dòng)條位置
    let scrollLeft =
        document.documentElement.scrollLeft || document.body.scrollLeft;// 獲取水平滾動(dòng)條位置
    menu.style.display = 'block';
    menu.style.left = e.clientX + scrollLeft + 'px';
    menu.style.top = e.clientY + scrollTop + 'px';
  }
  // 鼠標(biāo)點(diǎn)擊其他位置時(shí)隱藏菜單
  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è)置菜單為絕對(duì)位置
    width: 100px;
    height: 120px;
    display: none;
  }
</style>
</head>
<body style="overflow:auto">
  <div id="box" style="height:5000px; width:5000px">讓body元素出現(xiàn)滾動(dòng)條用的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" >舉報(bào)</a></li>
    </ul>
  </div>
</body>
</html>

實(shí)現(xiàn)效果

總結(jié)

以上所述是小編給大家介紹的JavaScript 自定義html元素鼠標(biāo)右鍵菜單功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章:

相關(guān)文章

解決火狐瀏覽器下JS setTimeout函數(shù)不兼容失效不執(zhí)行的方法
今天檢查自己用JQuery+AJAX+PHP做的網(wǎng)站后臺(tái)登錄檢測(cè)，愛(ài)其他瀏覽器中兼容性還不錯(cuò) 結(jié)果到了火狐（FireFox）瀏覽器下setTimeout這個(gè)JS內(nèi)置函數(shù)不執(zhí)行了，本文將提供詳細(xì)的解決方法
2012-11-11
JavaScript中的自定義事件舉例詳解
在JavaScript中自定義事件的用法是前端開(kāi)發(fā)中一個(gè)較為高級(jí)的話(huà)題,它允許開(kāi)發(fā)者創(chuàng)建和觸發(fā)自己的事件,從而達(dá)到更好的模塊化和代碼解耦,這篇文章主要介紹了JavaScript中自定義事件的相關(guān)資料,需要的朋友可以參考下
2025-04-04
JS實(shí)現(xiàn)往下不斷流動(dòng)網(wǎng)頁(yè)背景的方法
這篇文章主要介紹了JS實(shí)現(xiàn)往下不斷流動(dòng)網(wǎng)頁(yè)背景的方法,實(shí)例分析了遞歸調(diào)用自定義函數(shù)scrollBG實(shí)現(xiàn)動(dòng)態(tài)背景特效的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
對(duì)JavaScript的eval()中使用函數(shù)的進(jìn)一步討論
《JavaScript語(yǔ)言精髓與編程實(shí)踐》的讀者I22141提出了一問(wèn)題：為什么下面這段代碼在JScript 和SpiderMonkey中表現(xiàn)不一樣：
2008-07-07
js實(shí)現(xiàn)點(diǎn)擊鏈接后窗口縮小并居中的方法
這篇文章主要介紹了js實(shí)現(xiàn)點(diǎn)擊鏈接后窗口縮小并居中的方法,實(shí)例分析了javascript操作窗口的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
JS實(shí)現(xiàn)新浪微博效果帶遮罩層的彈出框代碼
這篇文章主要介紹了JS實(shí)現(xiàn)新浪微博效果帶遮罩層的彈出框代碼,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-10-10
推薦js實(shí)現(xiàn)商品分類(lèi)到搜索欄友好提示（人機(jī)交互）
推薦js實(shí)現(xiàn)商品分類(lèi)到搜索欄友好提示（人機(jī)交互）...
2007-05-05
關(guān)于javascript函數(shù)的幾個(gè)話(huà)題
關(guān)于javascript函數(shù)的幾個(gè)話(huà)題...
2007-03-03
在Webpack中用url-loader處理圖片和字體的問(wèn)題
這篇文章主要介紹了在Webpack中用url-loader處理圖片和字體的問(wèn)題及解決方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-04-04
JavaScript數(shù)據(jù)類(lèi)型轉(zhuǎn)換的注意事項(xiàng)
JavaScript是一種無(wú)類(lèi)型語(yǔ)言，但同時(shí)JavaScript提供了一種靈活的自動(dòng)類(lèi)型轉(zhuǎn)換的處理方式?；疽?guī)則是，如果某個(gè)類(lèi)型的值用于需要其他類(lèi)型的值的環(huán)境中，JavaScript就自動(dòng)將這個(gè)值轉(zhuǎn)換成所需要的類(lèi)型。
2016-07-07