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:

Angenommen, ich Ich möchte das oben Gesagte tun. Dieses p ist als Rechtsklick-Menü festgelegt und kann nach Belieben verschönert werden.

<p id="menu" style="width: 0;height: 0;background: cadetblue;position: absolute"></menu>

Das Prinzip besteht darin, das Kontextmenü

Ereignis

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

-Attribute

verwenden, 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

zu erzielen.

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!