WebAPI-禁止鼠标右键和鼠标选中

水深无声 2023-06-15 14:24 41阅读 0赞

## 鼠标右键菜单 ##

`contextmenu` 当点击鼠标右键或按下键盘上的菜单键时会触发该事件，该事件会打开上下文菜单

在有些情况下需要禁用鼠标右键菜单，这时就可以使用事件对象的 `preventDefault()` 方法禁用右键菜单

未禁用时：

<p>这是一段文字，测试是否能使用右键菜单</p>
    
    <script> function $(selector) { return document.querySelector(selector) } // 注册鼠标右键事件 $('p').addEventListener('contextmenu', function(e) { // 打印事件对象 console.log(e) }) </script>

会弹出右键菜单  
![在这里插入图片描述][20191122200044618.gif]  
禁用后：

右键点击后不再显示右键菜单

![在这里插入图片描述][20191122200725893.gif]

## 鼠标选中 ##

`selectstart` 鼠标开始选事件，在鼠标开始选中内容时触发；比如选中一段文本，在开始选中时就会触发

在一些情况下不希望用户选中文本内容，同样可以使用 `preventDefault()` 来禁止用户选中

禁用前：

<p>这是一段文字，测试是否能被选中</p>
    
    <script> function $(selector) { return document.querySelector(selector) } // 注册鼠标右键事件 $('p').addEventListener('selectorstart', function(e) { // 禁用右键菜单 e.preventDefault() // 打印事件对象 console.log(e) }) </script>

可以选中文字  
![在这里插入图片描述][20191122215225288.gif]  
禁用后：

<p>这是一段文字，测试是否能被选中</p>
    
      <script> function $(selector) { return document.querySelector(selector) } $('p').addEventListener('selectstart', function(e) { // 禁止选中 e.preventDefault() console.log(e) }) </script>

不可选中  
![在这里插入图片描述][20191122215515976.gif]

[20191122200044618.gif]: https://img-blog.csdnimg.cn/20191122200044618.gif
[20191122200725893.gif]: https://img-blog.csdnimg.cn/20191122200725893.gif
[20191122215225288.gif]: https://img-blog.csdnimg.cn/20191122215225288.gif
[20191122215515976.gif]: https://img-blog.csdnimg.cn/20191122215515976.gif