欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js調(diào)出上下文菜單的實(shí)例

 更新時(shí)間：2015年12月17日 16:47:57   作者：猿客  
這篇文章主要介紹了js調(diào)出上下文菜單的實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例講述了js調(diào)出上下文菜單的實(shí)例代碼，分享給大家供大家參考，具體如下：

原理
　　當(dāng)用戶點(diǎn)擊右鍵時(shí)會(huì)觸發(fā)一個(gè)contextmenu事件，默認(rèn)會(huì)觸發(fā)瀏覽器的默認(rèn)的上下文菜單，通過手動(dòng)阻止這個(gè)默認(rèn)行為，然后再顯示自定義的上下文菜單，當(dāng)用戶單擊時(shí)隱藏這個(gè)菜單即可。
代碼
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");
 
 // 獲取鼠標(biāo)右擊時(shí)的坐標(biāo)，并設(shè)置上下文菜單出現(xiàn)位置
 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";
 });

代碼出現(xiàn)的EventUtil在這篇文章有介紹： 《js跨瀏覽器的事件偵聽器和事件對(duì)象的使用方法》

以上就是本文的全部內(nèi)容，教大家js調(diào)出上下文菜單的方法，希望對(duì)大家的學(xué)習(xí)有所幫助。

相關(guān)文章

最新評(píng)論