The realization principle and source code _javascript technique of JS custom right mouse button

Today to record JS from the definition of the right mouse button, the same first to decompose its implementation principle:

1, the right to screen the default event; (At one point I thought the change was the default event)

2, a UL of the hidden; (This I have also been pedantic to think that the operation is worth this is Div, Khan)

3, the right mouse click to make the response, showing the hidden ul;

4, after the mouse clicks again, the UL is hidden again

In this way, what we need to do is not a lot simpler, first code:

HTML section

<ul id= "Testright" style= "width:100px;background-color:yellow;position:absolute;z-index:100;" > 
<li><a href= "#" > Start </a></li> 
<li><a href= "#" > Suspend </a></li > 
<li><a href= "#" > Goodbye </a></li> 
</ul>

JavaScript section:

Window.onload=function () { 
var Forright=document.getelementbyid ("Testright");/Get object, now too familiar 
Forright.style.display= "None"; 
var title=forright.getelementsbytagname ("Li"); 

for (Var i=0;i<title.length;i++) { 
title[i].onmouseover=function () { 
this.classname= "active";/ In fact, here we can also call other events bar 
}; 
Title[i].onmouseout=function () {//Here is also the mouse two events bar 
this.classname= "";} 

Document.oncontextmenu=function (Event) {//This is the key point of implementation 
var event=event| | window.event;//This is not a problem? 
forright.style.display= "block"; 
forright.style.left=event.clientx+ "px"; 
forright.style.top=event.clienty+ "px";//mouse coordinates ah 
return false;//here returns false is to mask the default event 
}; 
Document.onclick=function () {//is for a more vivid imitation ah 
forright.style.display= "none"; 
}; 

Let's take a look at the key points of today's record: Document.oncontextmenu This event returns false is to mask the default event, if we do not write the other, only in this event to write return, as if the following

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

In this case, clicking the right button will not show any response. And then go back and look at the whole event application, it seems that in addition to this event, the other is more familiar with the incident, it is the event of this integration is always lacking, the key is the idea is a creative bar, but first no matter where many, first the whole bar, but ask for 3,000, not to write to ask Yin. Stance, stance, stance ...