js自定義鼠標(biāo)右鍵的實現(xiàn)原理及源碼
更新時間：2014年06月23日 10:35:56 投稿：whsnow
這篇文章主要介紹了js自定義鼠標(biāo)右鍵的實現(xiàn)原理及源碼,需要的朋友可以參考下
今天來記錄下js來自定義鼠標(biāo)右鍵，同樣先來分解下它的實現(xiàn)原理：
1、屏蔽右鍵默認(rèn)事件；（一度我以為修改的就是默認(rèn)事件）
2、對一個ul的隱藏；（這個我也曾迂腐的認(rèn)為值得這樣操作的都是div，汗）
3、對鼠標(biāo)點擊右鍵做出的響應(yīng)，顯示隱藏的ul；
4、鼠標(biāo)重新點擊后，ul重新被隱藏
這樣來看的話，我們需要做的事情是不是就簡單了很多，先上代碼：
html部分
<ul id="testRight" style="width: 100px;background-color: yellow;position: absolute;z-index: 100;"> <li><a href="#">開始</a></li> <li><a href="#">暫停</a></li> <li><a href="#">拜拜</a></li> </ul>
javascript部分：
window.onload=function(){
var forRight=document.getElementById("testRight");//獲取對象，現(xiàn)在太熟悉了
forRight.style.display="none";
var title=forRight.getElementsByTagName("li");
for(var i=0;i<title.length;i++){
title[i].onmouseover=function(){
this.classname="active";//其實這里我們也可以調(diào)用其他事件吧
};
title[i].onmouseout=function(){//這里也是鼠標(biāo)的兩個事件吧
this.classname="";
};
}
document.oncontextmenu=function(event){//這是實現(xiàn)的關(guān)鍵點
var event=event||window.event;//這個都不是問題了吧
forRight.style.display="block";
forRight.style.left=event.clientX+"px";
forRight.style.top=event.clientY+"px";//鼠標(biāo)的坐標(biāo)啊
return false;//這里返回false就是為了屏蔽默認(rèn)事件
};
document.onclick=function(){//就是為了更形象的模仿啊
forRight.style.display="none";
};
};
先來看今天記錄的最關(guān)鍵的地方：document.oncontextmenu這個事件返回false的話就是屏蔽默認(rèn)事件，如果我們其他都不寫，只在這個事件里面寫return，好像就下面這樣
document.oncontextmenu=function(){
return false;
}
這樣的話，再點擊右鍵也不會出現(xiàn)任何響應(yīng)了。然后返回來再看整個的事件應(yīng)用，好像除了這個事件，其他的都是比較熟悉的事件了，可就是對事件的這種整合總是缺乏，關(guān)鍵還是思路是創(chuàng)意吧，不過先不管哪兒多了，先整吧，但求熟讀三千首，不求寫來只問吟。扎馬步，扎馬步，扎馬步.....
相關(guān)文章
JS控制靜態(tài)頁面之間傳遞參數(shù)獲取參數(shù)并應(yīng)用的簡單實例
下面小編就為大家?guī)硪黄狫S控制靜態(tài)頁面之間傳遞參數(shù)獲取參數(shù)并應(yīng)用的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
通過復(fù)制Table生成word和excel的javascript代碼
通過復(fù)制Table生成word和excel，個人感覺這個功能還是比較實用的，下面有個不錯的示例，希望對大家有所幫助2014-01-01
eval與window.eval的差別分析，學(xué)習(xí)js的朋友可以了解下。2011-03-03
filter是new一個新的array，這篇文章主要介紹了javascipt filter過濾介紹及使用,需要的朋友可以參考下2014-09-09
Promise，相信每一個前端工程師都或多或少地在項目中都是用過，畢竟它早已不是一個新名詞。ES6中已經(jīng)原生對它加以支持，在caniuse中搜索一下 Promise ，發(fā)現(xiàn)新版的chrome和firefox也已經(jīng)支持。但是低版本的瀏覽器我們可以使用 es6-promise 這個 polyfill 庫來加以兼容。2017-02-02
基于Bootstrap使用jQuery實現(xiàn)簡單可編輯表格
這篇文章主要介紹了基于Bootstrap使用jQuery實現(xiàn)簡單可編輯表格的相關(guān)資料,需要的朋友可以參考下2016-05-05
再讀《JavaScript權(quán)威指南》（犀牛書）9.7確定對象類型 之摘錄2012-03-03
layui實現(xiàn)左側(cè)菜單點擊右側(cè)內(nèi)容區(qū)顯示
這篇文章主要為大家詳細(xì)介紹了layui實現(xiàn)左側(cè)菜單點擊右側(cè)內(nèi)容區(qū)顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了JS實現(xiàn)的圖片自動輪換效果，有具體的實現(xiàn)思路及截圖，希望對大家學(xué)習(xí)有所幫助2014-04-04
這篇文章主要介紹了JS正則表達(dá)式常見用法,結(jié)合實例形式分析了javascript元字符、分組符、修飾符、量詞基本含義,并結(jié)合具體案例形式分析了javascript正則基本使用技巧,需要的朋友可以參考下2018-06-06