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

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.

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; //很重要，不能让浏览器显示自己的右键菜单

}

document.onclick=function(e){

　　if(e.target.id!='menu')

　　{

　　　　var node=document.querySelector('#menu');

　　　　node.style.width=0;

　　　　node.style.height=0;

　　}
}

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!