この記事では、カスタム右クリックメニューの簡単な実装例を主に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; } }
アニメーション 効果を実現できます。
以上がJS を使用して右クリック メニューをカスタマイズする簡単な例を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。