js實現自訂滑鼠右鍵-------Day45

標籤：javascript   滑鼠   右鍵事件   

又是周末了，不過其實這在國外應該算是一周的開始吧，不管怎麼說，今天是在休息，放鬆我緊繃的神經，放鬆我有些疲憊的精神，昨晚上要裂了般的頭疼，彷彿所有的資料都在腦子字面飛舞旋轉，伴著一陣陣的噁心，當時把媳婦兒給嚇壞了，實在不知道科比是每天怎麼看到那淩晨四點鐘的太陽的，這體質沒法說了，而有一點卻是不得不說，這身體真的才是一切的根本，友情建議各位朋友還是好好鍛煉身體，我也要好好鍛煉身體。

回顧這一周，項目組長的一句話給我很大的觸動，原話我記不得怎麼說了，大抵意思是說：不論你會多少，你終究要用上了才是你的。其實當時那句話在當時的情形來看應該是有些牽強，甚至說是不對的，但是還是讓我感慨不已。回想最初去找工作的時候，在簡曆上寫上會什麼什麼，去面試問你懂什麼什麼，然後考這考那，可到了工作上卻不一定就全部用上了，甚至有些當你用上的時候，你才發現你會的那些實際上還是沒用，還要去學，這跟我最初的工作經曆是不同的，那時就一片包區，在自己的片區想怎麼折騰就怎麼折騰，把問題解決了就好，而這慣性的思維方式讓我在進入這個行業這最初是痛苦不已，到這會卻彷彿突然想明白了一樣：做什麼都要守規矩，而規矩的存在可能覺得是束縛自己的發揮，可更大意義上卻方便了項目的整體進度，因為規矩在那，一個項目組內都守著這個規範，在整合的時候也就簡單的多了吧。

當然還明白了很多，都是一家之言，就不在這現眼了，其實如果是學校是讓人學到了知識，那公司卻是讓人學會了用法，大概這就是學生時代的我們總在感慨學到的東西沒用的原因了吧，畢竟內功幾千年，沒有招式的話都是假的吧。

絮絮叨叨說了很多，言歸真轉，今天來記錄下js來自訂滑鼠右鍵，同樣先來分解下它的實現原理：

1、屏蔽右鍵預設事件；（一度我以為修改的就是預設事件）

2、對一個ul的隱藏；（這個我也曾迂腐的認為值得這樣操作的都是div，汗）

3、對滑鼠點擊右鍵做出的響應，顯示隱藏的ul；

4、滑鼠重新點擊後，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");//擷取對象，現在太熟悉了forRight.style.display="none";var title=forRight.getElementsByTagName("li");for(var i=0;i<title.length;i++){title[i].onmouseover=function(){this.classname="active";//其實這裡我們也可以調用其他事件吧};title[i].onmouseout=function(){//這裡也是滑鼠的兩個事件吧this.classname="";};}document.oncontextmenu=function(event){//這是實現的關鍵點var event=event||window.event;//這個都不是問題了吧forRight.style.display="block";forRight.style.left=event.clientX+"px";forRight.style.top=event.clientY+"px";//滑鼠的座標啊return false;//這裡返回false就是為了屏蔽預設事件};document.onclick=function(){//就是為了更形象的模仿啊forRight.style.display="none";};};

先來看今天記錄的最關鍵的地方：document.oncontextmenu這個事件返回false的話就是屏蔽預設事件，如果我們其他都不寫，只在這個事件裡面寫return，好像就下面這樣

document.oncontextmenu=function(){     return false;}

這樣的話，再點擊右鍵也不會出現任何響應了。然後返回來再看整個的事件應用，好像除了這個事件，其他的都是比較熟悉的事件了，可就是對事件的這種整合總是缺乏，關鍵還是思路是創意吧，不過先不管哪兒多了，先整吧，但求熟讀三千首，不求寫來只問吟。紮馬步，紮馬步，紮馬步.....

其實最早我看“哈利傳輸速率”的時候，我就特別羨慕他喜歡他的魔力掃帚，每天去打理清洗，看書也在看關於掃帚的等等，就彷彿想起古時候的劍客，可以那麼虔誠。我很幸運，那麼早就找到了自己願意奮鬥的事情，我願帶一顆朝聖的心，前進....