Implementation principle and source code of js custom mouse right button_javascript skills

Today, let’s record js to customize the right mouse button. Let’s also break down its implementation principle:

1. Block the right-click default event; (at one time I thought the modification was the default event)

2. Hiding an ul; (I once thought pedantically that all divs worthy of such operation are divs)

3. In response to the right click of the mouse, the hidden ul is displayed;

4. After the mouse is clicked again, ul is hidden again

Looking at it this way, what we need to do is much simpler. Let’s start with the code:

html part

<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 part:

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"; 
}; 
};

Let’s first look at the most critical part of today’s record: If the document.oncontextmenu event returns false, it means blocking the default event. If we don’t write anything else, we only write return in this event, as follows

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

In this case, there will be no response when you right-click again. Then go back and look at the entire event application. It seems that except for this event, the others are relatively familiar events, but the integration of events is always lacking. The key is that the idea is creative, but I don’t care about it for now. , let’s finish it first, but I want to read three thousand poems by heart, not to write them, just to chant them. Zama step, Zama step, Zama step....