Heim >Web-Frontend >js-Tutorial >Implementierungsprinzip und Quellcode von js benutzerdefinierten Maus-Rechts-Button_Javascript-Fähigkeiten
Lassen Sie uns heute js aufzeichnen, um die rechte Maustaste anzupassen. Lassen Sie uns auch das Implementierungsprinzip aufschlüsseln:
1. Blockieren Sie das Rechtsklick-Standardereignis (früher dachte ich, die Änderung sei das Standardereignis)
2. Eine UL verstecken (Ich dachte einmal pedantisch, dass alle Divs, die einer solchen Operation würdig sind)
3. Als Reaktion auf den rechten Mausklick wird die ausgeblendete UL angezeigt;
4. Nach erneutem Mausklick wird ul wieder ausgeblendetSo gesehen ist das, was wir tun müssen, viel einfacher: Beginnen wir mit dem Code:
HTML-Teil
<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>
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"; }; };
Schauen wir uns zunächst den kritischsten Teil des heutigen Datensatzes an: Wenn das Ereignis „document.oncontextmenu“ „false“ zurückgibt, bedeutet dies, dass das Standardereignis blockiert wird. Wenn wir nichts anderes schreiben, schreiben wir nur „return“ in dieses Ereignis, wie folgt
document.oncontextmenu=function(){ return false; }