ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである。之前在vue项目里面看到了屏蔽右键默认方法的一个措施，就想着，原生的js也一定有这个方法可以自动屏蔽右键默认方法。结果真的有。

简答

针对某个元素区域的屏蔽

let objDemo = document.getElementsByClassName('demo')[0] objDemo.oncontextmenu = (e) => { e.preventDefault() }

全局屏蔽

document.oncontextmenu = (e) => { e.preventDefault() }

详解

针对右键默认打开菜单的一种屏蔽手段。

let objDemo = document.getElementsByClassName('demo')[0] objDemo.oncontextmenu = (e) => { e.preventDefault() }

oncontextmenu检测打开菜单事件，严格来说是先触发事件，再打开菜单。但是，很不幸的是，咱使用了preventDefault()方法，直接屏蔽了默认的事件，也就是说，一旦触发这个右击事件试图打开菜单栏的时候它就会马上被屏蔽，从而无法生成这个菜单栏。

下面是全局的屏蔽右键方法

document.oncontextmenu = (e) => { e.preventDefault() }

如果条件允许，还可以自己再另外写一个属于自己的菜单

window.oncontextmenu = (e) => { e.preventDefault() } let a = null window.onclick = fun1 // 整个页面被点击都可以触发 function fun1(e) { if (e.button === 2) { // 判断是不是右键点击 if (a) { document.body.removeChild(a) a = null // 移除元素之后把参数a清零，便于下次生成新的元素 } a = document.createElement('div') a.className = 'menu' a.innerHTML = 'ddddd' a.display = 'none' document.body.appendChild(a) // 元素在正式生成之后才有clientHeight clientWidth，所以先设置不可见 // 防止菜单跑出页面外边 if (e.clientY + a.clientHeight >= window.screen.height) { a.style.top = (e.clientY - a.clientHeight) + 'px' } else { a.style.top = e.clientY + 'px' } if (e.clientX + a.clientWidth >= window.screen.width) { a.style.left = (window.screen.width - a.clientWidth) + 'px' } else { a.style.left = e.clientX + 'px' } //等一系列兼容完成之后再设置可见 a.display = 'block' } } document.body.onclick = exit // 点击菜单外面的其他地方也可以关闭该菜单 function exit(e) { if (a) { if (e.path.includes(a) === false) { document.body.removeChild(a) a = null } } }

总结

这个屏蔽右键方法在自己写右键菜单的时候非常好使，也可以自己封装一个自己定制的菜单，建议记住。