js_javascriptスキルによるコンテキストメニューの呼び出し例

この記事の例では、js を使用してコンテキスト メニューを呼び出すサンプル コードを説明しており、詳細は次のとおりです。

原則
ユーザーが右クリックすると、コンテキスト メニュー イベントがトリガーされます。このデフォルトの動作を手動でブロックすると、このメニューが非表示になります。クリックします。
コード
1.html

<div id="box" style="color:red;width: 100%;height:1000px;" >
 <div id="left" style="float:left;width:500px;margin-left: 50px;height:500px;background: #cdeddf;">
  
 </div> 
 <div id="right" style="float:right;width:600px;margin-right: 50px;height:500px;background: #cdeaae;">
 </div>
 <ul id="menu" style="position: absolute;visibility: hidden;list-style: none;">
  <li>按钮1</li>
  <li>按钮2</li>
  <li>按钮3</li>
 </ul>
</div>

2.js

// 添加contextmenu事件
 var right = document.getElementById("right");
 EventUtil.addEventListener(right, "contextmenu", function(event) {
 event = EventUtil.getEvent(event);
 EventUtil.preventDefault(event);
 var menu = document.getElementById("menu");
 
 // 获取鼠标右击时的坐标，并设置上下文菜单出现位置
 page = EventUtil.getPagePosition(event); 
 menu.style.left = page.pageX + "px";
 menu.style.top = page.pageY + "px";
 menu.style.visibility = "visible";
 });
 
 // 添加隐藏上下文菜单事件
 EventUtil.addEventListener(document, "click", function(event) {
 var menu = document.getElementById("menu");
 menu.style.visibility = "hidden";
 });

コード内に表示される EventUtil は、この記事で紹介されています: 「JS クロスブラウザー イベント リスナーとイベント オブジェクトの使用方法」

以上がこの記事の全内容です。js でコンテキスト メニューを表示する方法を説明します。あなたの学習に役立つことを願っています。