この記事の例では、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 でコンテキスト メニューを表示する方法を説明します。あなたの学習に役立つことを願っています。