禁止鼠标右键菜单 - contextmenu
contextmenu 主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单
右键菜单示例图:
contextmenu 主要代码:
// 1. contextmenu 禁用右键菜单
document.addEventListener('contextmenu', function(e){
e.preventDefault()
})
这里选择直接用文档节点 document在整个页面中禁用鼠标右键菜单
但是还是可以使用ctrl + c 来达到复制文字的目的。
禁止选中 - selectstart
select 选择;start 开始;其触发时间为目标对象被开始选中时(即选中动作刚开始,尚未实质性被选中)。该事件常使用于使目标对象“禁止变蓝”,比如在很多地方当用户双击时,一些元素会变成蓝色(选中状态),而当我们要避免这种情况时就可以使用该事件。
未阻止默认行为前效果图:
图中可见当我们选中document的任意一处即刻触发选中事件。提示这里的选中并非只是文字而是整个document。
示例代码:
document.addEventListener('selectstart', function(){
console.log('我被选中啦');
})
禁用选中事件则是加上阻止默认行为即可
示例代码:
// 2. selectstart 禁止选中文字
document.addEventListener('selectstart', function(e){
e.preventDefault()
})