鼠标事件 - contextmenu 和 selectstart

禁止鼠标右键菜单 - 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()
    })