js自定义鼠标右击菜单
墨初 前端设计 7407阅读
如果对浏览器的鼠标右击菜单的选项不满意，可以通过js代码来监听鼠标右击事件，来显示自定义的菜单，具体的实现代码可参考下面的显示代码！
js自定义鼠标右击菜单
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>飞鸟慕鱼博客--右键菜单</title>
<style type="text/css">
#menu_alert {
position: fixed;
border: 1px solid #ccc;
padding: 0 0px;
display: none;
}
#menu_alert a{
height: 45px;
line-height: 45px;
border-bottom: 1px dashed #ccc;
width: 150px;
text-align: center;
display: block;
font-size: 16px;
}
</style>
</head>
<body>
<div id="menu_alert">
<a href="javascript:;">右击菜单一</a>
<a href="javascript:;">右击菜单二</a>
<a href="javascript:;">右击菜单三</a>
<a href="javascript:;">右击菜单四</a>
</div>
<script type="text/javascript">
document.oncontextmenu = function (e) {
var e = e || window.event;
var oX = e.clientX;
var oY = e.clientY;
$('#menu_alert').css({ 'left': oX + 'px', 'top': oY + 'px','display':'block'});
return false;
};
//鼠标左键点击隐藏菜单
$(document).on('click', function(e){
var e = e || window.event;
$('#menu_alert').css('display','none');
}
);
</script>
</body>
</html>JQ自定义鼠标右键菜单
jquery代码也可以实现上面的功能，只需要引入jquery文件并替换下面的jq代码即可！
示例代码：
<script type="text/javascript">
$(document).bind('contextmenu', function (e) {
return false; //这段代码来禁止浏览器的系统右击菜单
});
$(document).mousedown(function (e) {
if (3 == e.which) {
var e = e || window.event;
var oX = e.clientX;
var oY = e.clientY;
$('#menu_alert').css({ 'left': oX + 'px', 'top': oY + 'px', 'display': 'block' });
return false;
}
});
$(document).on('click',function(e){
$('#menu_alert').css('display', 'none');
});
</script>ps:
上面说的js与jq自定义右击菜单示例，还有很多的后期工作要做，比如菜单的显示位置，菜单的展示方式，菜单隐藏的方法等等，都可以通过 css 与 js 代码来控制！