JS を使用して右クリック メニューをカスタマイズする簡単な例を共有する

この記事では、カスタム右クリックメニューの簡単な実装例を主にJSで紹介します。編集者が非常に良いと思ったので、参考として共有します。エディターをフォローして見てみましょう

RT、原理を説明するだけの簡単な例です

コードは次のとおりです:

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

上の p を右クリック メニューとして設定し、それを美化したいとします。意のままに。

原則は、コンテキストメニューイベントを使用することです。右クリック時にこのイベントがトリガーされると、イベントオブジェクトと、ページ clientX および clientY の左上隅との間の距離を取得できます。

これら 2 つの

プロパティ を使用して p の水平および垂直オフセットを制御し、 false を返してイベントのデフォルトの 動作をキャンセルしてブラウザの右クリック メニューをシミュレートできます。

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;

　　}
}

これは単なる基本的なアイデアであり、中心となるのは contextmenu イベントです。これに基づいて、CSS を使用して自由に美化したりアップグレードしたり、トランジションなどの属性を追加して

アニメーション 効果を実現できます。

以上がJS を使用して右クリック メニューをカスタマイズする簡単な例を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。