js自定义鼠标右键菜单

可以用js实现自定义鼠标右击菜单栏

实现：

1. 鼠标右击时阻止右键的默认行为
2. 显示自定义菜单列表
3. 在document内点击时隐藏自定义菜单列表

 

所有浏览器都支持oncontextmenu事件，第一种方式直接用contextmenu事件最直接

首先右击时阻止默认行为：

//如果是整个文档都使用右键自定义菜单
$(document).on('contextmenu',function(ev){
    ev.preventDefault();
})

//如果是部分区域使用自定义菜单
$('.content-area').on('contextmenu','.dragItem',function(ev){
    ev.preventDefault();
})

//如果是动态生成的某个节点（按钮）需要右击自定义菜单栏
$('.content-area').on('contextmenu','.dragItem',function(ev){
    ev.preventDefault();
})

 

显示自定义菜单列表

$('.content-area').on('contextmenu','.dragItem',function(ev){
  
    target = ev.target;
    let pageX = ev.pageX+6,
    pageY = ev.pageY;
    let menu = document.querySelector('.context-menu');
    menu.style.left = pageX + 'px';
    menu.style.top = pageY + 'px';
    menu.style.display = 'block';
	
})

 

第二种方式可以通过mousedown事件来监听

鼠标mousedown事件中的event对象中隐含了一个button属性，通过button属性可以判断是哪个键被触发。这个属性包含了3个值：0 | 1 | 2。

event.button : 0  //鼠标左键
event.button : 1  //鼠标中键
event.button : 2  //鼠标右键

$('.content-area').on('mousedown','.dragItem',function(ev){
    if(ev.button===2){
	    target = ev.target;
		let pageX = ev.pageX+6,
		    pageY = ev.pageY;
		let menu = document.querySelector('.context-menu');
		menu.style.left = pageX + 'px';
		menu.style.top = pageY + 'px';
		menu.style.display = 'block';
	}
})

 然后就可以定义自己在点击自定义菜单栏中条目时所做的事情了

$('.context-menu').on('click',function(ev){
    //...
})

最后当点击页面其他区域的时候隐藏自定义菜单栏

$(document).on('click',function(ev){
    $('.context-menu').hide();
})