JS 取消右键默认事件 - Kaiqisan

ヤッハロー、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
        }
    }
}

总结

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