JS簡單實現(xiàn)自定義右鍵菜單實例
更新時間：2017年05月31日 09:28:56 作者：split
本篇文章主要介紹了JS簡單實現(xiàn)自定義右鍵菜單實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
RT，一個簡單的例子，僅僅講述原理
復(fù)制代碼 代碼如下:
<div id="menu" style="width: 0;height: 0;background: cadetblue;position: absolute"></menu>
假設(shè)我要把上面這個div設(shè)置為右鍵菜單，先隨意美化一下。
原理就是利用contextmenu事件，右鍵點擊時，會觸發(fā)這個事件時，該事件對象可以獲得鼠標(biāo)距離頁面左上角的距離clientX和clientY，
我們可以利用這兩個屬性，來控制div的水平，垂直偏移量，并且返回false，取消事件的默認(rèn)行為，來模擬瀏覽器的右鍵菜單。
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)在是關(guān)閉部分，關(guā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事件。你可以在此基礎(chǔ)上使用CSS隨意美化升級，加入類似于transition等屬性，來實現(xiàn)動畫效果。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
就是將需要檢測的方法/對象作為if語句的判斷條件，具體做法如下2009-07-07
這篇文章主要介紹了js實現(xiàn)的彩色方塊飛舞奇幻效果,涉及JavaScript響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-01-01
將\u8BF7\u9009\u62E9 這樣的字符串轉(zhuǎn)為漢字的代碼
如何把 \u8BF7\u9009\u62E9 這樣的字符串轉(zhuǎn)為漢字,喜歡的朋友可以參考下。2010-11-11
怎么限制input的text里輸入的值只能是數(shù)字(正則、js)
這篇文章主要通過正則表達(dá)式和JS代碼限制input的text里輸入的值只能是數(shù)字的相關(guān)資料,需要的朋友可以參考下2016-05-05
這篇文章主要為大家詳細(xì)介紹了關(guān)于Bootstrap導(dǎo)航條的使用和理解的學(xué)習(xí)記錄，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了后臺獲取ZTREE選中節(jié)點的方法,實例分析了ZTREE中g(shù)etZTreeObj方法與getCheckedNodes方法的使用技巧,需要的朋友可以參考下2015-02-02
IE8對JS通過屬性和數(shù)組遍歷解析不一樣的地方探討
如果是非IE8瀏覽器例如（IE7、IE9、Chrome、FF，僅測試這幾種）通過屬性和數(shù)組遍歷，其結(jié)果是一樣的，但對于IE8，結(jié)果會有一點小小的差異，在IE8下會把原型鏈擴(kuò)展方法當(dāng)做一個屬性輸出，大家可以測試一下2013-05-05
下面小編就為大家?guī)硪黄獪\談JS的基礎(chǔ)類型與引用類型。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
JavaScript立即執(zhí)行函數(shù)IIFE的用法詳解
在JavaScript開發(fā)中,立即執(zhí)行函數(shù)（Immediately Invoked Function Expression,簡稱IIFE）是一種非常實用的設(shè)計模式,本文將深入探討IIFE的基本概念、作用以及實際應(yīng)用場景,并通過多個示例幫助開發(fā)者更好地掌握這一技術(shù),需要的朋友可以參考下2025-02-02
EasyUI的DataGrid綁定Json數(shù)據(jù)源的示例代碼
本篇文章主要介紹了EasyUI的DataGrid綁定Json數(shù)據(jù)源的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12