亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JS簡單實現(xiàn)自定義右鍵菜單實例

 更新時間：2017年05月31日 09:28:56   作者：split  
本篇文章主要介紹了JS簡單實現(xiàn)自定義右鍵菜單實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

RT，一個簡單的例子，僅僅講述原理

 

復制代碼 代碼如下:

<div id="menu" style="width: 0;height: 0;background: cadetblue;position: absolute"></menu>

假設我要把上面這個div設置為右鍵菜單，先隨意美化一下。

原理就是利用contextmenu事件，右鍵點擊時，會觸發(fā)這個事件時，該事件對象可以獲得鼠標距離頁面左上角的距離clientX和clientY，

我們可以利用這兩個屬性，來控制div的水平，垂直偏移量，并且返回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; //很重要，不能讓瀏覽器顯示自己的右鍵菜單

}

現(xiàn)在是關閉部分，關閉右鍵菜單的方式，通常是在空白區(qū)域點擊左鍵。

document.onclick=function(e){

　　if(e.target.id!='menu')

　　{

　　　　var node=document.querySelector('#menu');

　　　　node.style.width=0;

　　　　node.style.height=0;

　　}
}

這僅僅是一個基本的思路的，核心就是contextmenu事件。你可以在此基礎上使用CSS隨意美化升級，加入類似于transition等屬性，來實現(xiàn)動畫效果。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

最新評論