鼠标点击事件（屏蔽右键菜单，弹出自定义菜单）

转载于 2020-07-15 15:10:56 发布 · 606 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.mk2048.com/blog/blog_hjkabha000hj.html

前端专栏收录该内容

2507 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现自定义右键菜单的方法。通过监听鼠标右键事件，显示一个绝对定位的div作为菜单，并调整其位置以匹配鼠标点击的位置。同时，点击页面其他区域会关闭菜单，实现了替代默认右键菜单的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*跟运动相关的模块都需要绝对定位*/
#idv1 {background: #CCCCCC;display: none;width: 50px;position: absolute;}
</style>
<script>

//鼠标右键默认菜单事件
document.oncontextmenu = function(ev) {
var oevent = ev || event;

var div1 = document.getElementById('idv1');
//弹出自定义菜单
div1.style.display = 'block';
//设置自定义菜单的坐标，达到鼠标右键的地方弹出自定义菜单
div1.style.left = oevent.clientX + 'px';
div1.style.top = oevent.clientY + 'px';

//屏蔽右键默认菜单
return false;
}
//点击页面任一地方，收起自定义菜单
document.onclick = function() {
var div1 = document.getElementById('idv1');
div1.style.display = 'none';
}
</script>
</head>