html菜单显示界面
*{
margin: 0;
padding: 0;
}
#btn{
width: 60px;
height: 30px;
background-color: #01AAED;
color: white;
display:none;
position: fixed;
left: 0%;
top: 0%;
}
#btn:hover{
background-color: white;
color: black;
}
$(function(){
//此处是针对图片,如果这个元素上鼠标右键,将浏览器默认右键事件给拦截了
$("#img").bind("contextmenu",function(e){
return false;
});
//之前在网上看过很多代码,但是有一个bug,算不少bug,但是我要在这里说一下。鼠标右键点击事件鼠标松开之后执行的,因为个人的操作习惯,当右键点起的时候在
按钮的0*0位置也执行了右键,所以说上边屏蔽了为什么还显示默认浏览器菜单,那么我们只需要把显示的元素鼠标右键给屏蔽掉就不会了,欢迎大家转载本代码,谢谢大家!
$("#btn").bind("contextmenu", function () {
return false;
})
$("#img").mousedown(function (e) {
if (e.which == 3)
{
//获取鼠标的x轴
var x = e.pageX;
//获取鼠标的Y轴
var y = e.pageY;
//对我们设定的菜单元素位置移动到当前鼠标右键点击的位置,并且显示出来
$("#btn").css({ ‘top‘: y + ‘px‘, ‘left‘: x + ‘px‘, ‘display‘: ‘block‘, ‘position‘: ‘absolute‘ });
}
})
})