鼠标右键自定义菜单-CFANZ编程社区

鼠标右键自定义菜单

原生js书写

//html
<li>胡歌</li>
//自定义的鼠标右键菜单  采取绝对定位，top、left默认为0，默认隐藏
<div class="menu">
    <div class="item">一级菜单</div>
    <div class="item">一级菜单</div>
    <div class="item">一级菜单</div>
</div>

//js部分  使用 contextmenu 事件
let lis=document.querySelector('li')
 //鼠标右键点击事件
lis.addEventListener('contextmenu',function(event){
	 // 阻止浏览器鼠标右击事件。
	 event.preventDefault();
	//显示自定义菜单，给它的left和top赋值
	 document.querySelector('.menu').style.display='block'
	 document.querySelector('.menu').style.left=event.clientX+'px'
	 document.querySelector('.menu').style.top=event.clientY+'px'
 })

//任意地方，隐藏右键菜单
document.body.addEventListener('click',function(){
	//做个判断，如果菜单隐藏就直接返回
    if(document.querySelector('.menu').style.display=='block'){
        document.querySelector('.menu').style.display='none'
    }else{
        return
    }
})

效果图：
在这里插入图片描述

注意：重点在于菜单的位置，应该是鼠标所在浏览器的位置为菜单的左上角顶点

鼠标事件对象的属性

clientX：当鼠标事件发生时，鼠标相对于浏览器（这里说的是浏览器的有效区域）x轴的位置；
clientY：当鼠标事件发生时，鼠标相对于浏览器（这里说的是浏览器的有效区域）y轴的位置；
screenX：当鼠标事件发生时，鼠标相对于显示器屏幕x轴的位置；
screenY：当鼠标事件发生时，鼠标相对于显示器屏幕y轴的位置；
offsetX：当鼠标事件发生时，鼠标相对于事件源x轴的位置
offsetY：当鼠标事件发生时，鼠标相对于事件源y轴的位置

0 条评论