這篇文章主要介紹了JS如何實現(xiàn)自定義右鍵菜單，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

10多年的渝中網站建設經驗，針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。成都全網營銷推廣的優(yōu)勢是能夠根據(jù)用戶設備顯示端的尺寸不同，自動調整渝中建站的顯示方式，使網站能夠適用不同顯示終端，在瀏覽器中調整網站的寬度，無論在任何一種瀏覽器上瀏覽網站，都能展現(xiàn)優(yōu)雅布局與設計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)建站從事“渝中網站設計”,“渝中網站推廣”以來，每個客戶項目都認真落實執(zhí)行。

示例：

<div id="menu" ></menu>

假設我要把上面這個div設置為右鍵菜單，先隨意美化一下。

原理就是利用contextmenu事件，右鍵點擊時，會觸發(fā)這個事件時，該事件對象可以獲得鼠標距離頁面左上角的距離clientX和clientY，

我們可以利用這兩個屬性，來控制div的水平，垂直偏移量，并且返回false，取消事件的默認行為，來模擬瀏覽器的右鍵菜單。

document.oncontextmenu=function(e){

　　var x=e.clientX+'px';

　　var y=e.clientY+'px';

　　var node=document.querySelector('#menu');

　　node.style.left=x;

　　node.style.top=y;

　　node.style.width=100+'px';

　　node.style.height=100+'px';

　　return false; //很重要，不能讓瀏覽器顯示自己的右鍵菜單

}

現(xiàn)在是關閉部分，關閉右鍵菜單的方式，通常是在空白區(qū)域點擊左鍵。

document.onclick=function(e){

　　if(e.target.id!='menu')

　　{

　　　　var node=document.querySelector('#menu');

　　　　node.style.width=0;

　　　　node.style.height=0;

　　}
}

這僅僅是一個基本的思路的，核心就是contextmenu事件。你可以在此基礎上使用CSS隨意美化升級，加入類似于transition等屬性，來實現(xiàn)動畫效果。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“JS如何實現(xiàn)自定義右鍵菜單”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!

網頁題目：JS如何實現(xiàn)自定義右鍵菜單
路徑分享：http://www.chinadenli.net/article24/jdhpce.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站導航、網站設計、軟件開發(fā)、搜索引擎優(yōu)化、外貿建站、動態(tài)網站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)