你好，下面是关于“js为鼠标添加右击事件防止默认的右击菜单弹出”的完整攻略：
简述
在使用JavaScript开发网页时，我们常常需要对用户的操作进行一些限制或自定义，比如防止用户通过鼠标右键打开默认的右键菜单。在这种情况下，我们可以用JavaScript为鼠标添加右击事件，并阻止默认的右键菜单弹出。
实现步骤
- 阻止默认右键菜单
为了阻止默认的右键菜单弹出，我们可以通过在右击事件的回调函数中调用event.preventDefault()来达到目的。这个函数会阻止默认的行为，也就是禁止了右键菜单的弹出。如下所示：
window.addEventListener('contextmenu', function (event) {
event.preventDefault();
});
- 添加自定义菜单
为了替换默认的右键菜单，我们需要添加自己定义的菜单。这可以通过创建一个弹出式菜单实现。在右击事件回调函数中，我们可以动态创建一个
元素，然后设置它的位置和内容，使它看起来像一个菜单。如下所示：
window.addEventListener('contextmenu', function (event) {
event.preventDefault();
// 创建一个<div>元素，设置它的样式和内容
var menu = document.createElement('div');
menu.style.position = 'absolute';
menu.style.left = event.pageX + 'px';
menu.style.top = event.pageY + 'px';
menu.style.background = '#fff';
menu.style.border = '1px solid #ccc';
menu.style.padding = '8px';
menu.innerHTML = '自定义菜单';
// 将<div>元素添加到网页上
document.body.appendChild(menu);
// 点击文档任意处时，移除自定义菜单
document.addEventListener('click', function () {
menu.parentNode.removeChild(menu);
});
});
需要注意的是，在右击事件的回调函数中，我们还需要阻止事件的默认行为，以免浏览器弹出默认的右键菜单。我们可以使用event.preventDefault()函数来达到这个目的。
示例说明
示例一
以下示例演示了如何阻止页面上的图片被右键点击后弹出默认的菜单：
<img src="https://www.example.com/image.jpg" oncontextmenu="return false;">
在这个示例中，我们向标签添加了一个oncontextmenu事件处理函数，它返回false，从而阻止了默认的右键菜单。
示例二
以下示例演示了如何在页面上添加一个自定义的菜单：
window.addEventListener('contextmenu', function (event) {
event.preventDefault();
// 创建一个<div>元素，设置它的样式和内容
var menu = document.createElement('div');
menu.style.position = 'absolute';
menu.style.left = event.pageX + 'px';
menu.style.top = event.pageY + 'px';
menu.style.background = '#fff';
menu.style.border = '1px solid #ccc';
menu.style.padding = '8px';
menu.innerHTML = '自定义菜单';
// 将<div>元素添加到网页上
document.body.appendChild(menu);
// 点击文档任意处时，移除自定义菜单
document.addEventListener('click', function () {
menu.parentNode.removeChild(menu);
});
});
在这个示例中，我们为窗口添加了contextmenu事件的回调函数，并创建了一个
元素，用于显示自定义菜单。当用户右击窗口时，该回调函数会创建并添加一个
元素，作为自定义菜单。当用户单击文档中任意位置时，我们从文档中移除这个
元素，以此来移除自定义菜单。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js为鼠标添加右击事件防止默认的右击菜单弹出 - Python技术站
赞 (0)
微信扫一扫 
支付宝扫一扫
鼠标快捷手势设置方法实现鼠标手势来执行任务
上一篇
2023年6月27日
一款Jquery 分页插件的改造方法（服务器端分页）
下一篇
2023年6月27日
合作推广
分享本页
返回顶部