JS簡單實現自定義右鍵菜單
阿新 • • 發佈:2017-05-30
ans idt 右鍵 動畫 忘記 span spa round 部分
RT,一個簡單的例子,僅僅講述原理
<div id="menu" style="width: 0;height: 0;background: cadetblue;position: absolute"></menu>
假設我要把上面這個div設置為右鍵菜單,先隨意美化一下。
原理就是利用contextmenu事件,右鍵點擊時,會觸發這個事件時,該事件對象可以獲得鼠標距離頁面左上角的距離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; //很重要,不能讓瀏覽器顯示自己的右鍵菜單
}
現在是關閉部分,關閉右鍵菜單的方式,通常是在空白區域點擊左鍵。
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等屬性,來實現動畫效果。
如果你喜歡我的文章,不要忘記點個贊哦! ( ̄▽ ̄)~( ̄▽ ̄)~
JS簡單實現自定義右鍵菜單