Heim > Artikel > Web-Frontend > Teilen Sie ein einfaches Beispiel für die Anpassung des Rechtsklick-Menüs mit JS
In diesem Artikel wird hauptsächlich die einfache Implementierung von benutzerdefinierten Rechtsklick-Menübeispielen vorgestellt. Jetzt werde ich es mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber, um einen Blick darauf zu werfen RT, ein einfaches Beispiel, das nur das Prinzip erklärt
Der Code lautet wie folgt:
<p id="menu" style="width: 0;height: 0;background: cadetblue;position: absolute"></menu>
Das Prinzip besteht darin, das Kontextmenü
zu verwenden. Wenn Sie mit der rechten Maustaste klicken, wird dieses Ereignis ausgelöst. Das EreignisObjekt kann die Entfernung ermitteln Mit der Maus in der oberen linken Ecke der Seite clientX und clientY können wir diese beiden
-Attributeverwenden, um den horizontalen und vertikalen Versatz von p zu steuern, und false zurückgeben, um den Standardwert abzubrechen Verhalten des Ereignisses , um das Rechtsklick-Menü des Browsers zu simulieren.
Jetzt kommt der schließende Teil, um das Rechtsklick-Menü normalerweise zu schließen, indem man mit der linken Maustaste in den leeren Bereich klickt.document.oncontextmenu=function(e){ var x=e.clientX+'px'; var y=e.clientY+'px'; var node=document.querySelector('#menu'); node.style.left=x; node.style.top=y; node.style.width=100+'px'; node.style.height=100+'px'; return false; //很重要,不能让浏览器显示自己的右键菜单 }Dies ist nur eine Grundidee, der Kern ist das Kontextmenü-Ereignis. Auf dieser Basis können Sie CSS verwenden, um nach Belieben zu verschönern und zu aktualisieren und Attribute wie Übergänge hinzuzufügen, um den
document.onclick=function(e){ if(e.target.id!='menu') { var node=document.querySelector('#menu'); node.style.width=0; node.style.height=0; } }Animationseffekt
Das obige ist der detaillierte Inhalt vonTeilen Sie ein einfaches Beispiel für die Anpassung des Rechtsklick-Menüs mit JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!