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

黄舟
リリース: 2017-05-31 10:09:33
オリジナル
1613 人が閲覧しました

この記事では、カスタム右クリックメニューの簡単な実装例を主に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+&#39;px&#39;;

  var y=e.clientY+&#39;px&#39;;

  var node=document.querySelector(&#39;#menu&#39;);

  node.style.left=x;

  node.style.top=y;

  node.style.width=100+&#39;px&#39;;

  node.style.height=100+&#39;px&#39;;

  return false; //很重要,不能让浏览器显示自己的右键菜单

}
ログイン後にコピー

ここで終了部分です。右クリックメニューを閉じる方法は、通常、空白部分を左クリックします。

document.onclick=function(e){

  if(e.target.id!=&#39;menu&#39;)

  {

    var node=document.querySelector(&#39;#menu&#39;);

    node.style.width=0;

    node.style.height=0;

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

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

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート