首页 > 编程笔记 > JavaScript笔记 > jQuery事件
jQuery contextmenu事件详解
在 jQuery 中,常用的编辑事件只有一种,那就是 contextmenu 事件。
举例:禁用鼠标右键
图 1:禁用鼠标右键的效果
虽然鼠标右键功能被禁止了,但是我们依旧可以用快捷键,如使用
图 2:默认效果
当我们在 div 元素上点击鼠标右键时,预览效果如图 3 所示。
图 3:点击鼠标右键后的效果
举例:禁用鼠标右键
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $("body").contextmenu(function(){ return false; }) }) </script> </head> <body> <div>不要用战术上的勤奋,来掩盖战略上的懒惰。</div> </body> </html>预览效果如图 1 所示。
图 1:禁用鼠标右键的效果
虽然鼠标右键功能被禁止了,但是我们依旧可以用快捷键,如使用
"ctrl"+"c"
快捷键来复制内容、使用"ctrl"+"s"
快捷键来保存网页等,并不能真正地防止复制。举例:点击鼠标右键切换背景颜色contextmenu 事件在大多数情况下都是用来保护版权的。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div { width:150px; height:100px; background-color: lightskyblue; } </style> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $("div").contextmenu(function(){ $(this).css("background-color", "hotpink"); }) }) </script> </head> <body> <div></div> </body> </html>默认情况下,预览效果如图 2 所示。
图 2:默认效果
当我们在 div 元素上点击鼠标右键时,预览效果如图 3 所示。
图 3:点击鼠标右键后的效果
所有教程
- C语言入门
- C语言编译器
- C语言项目案例
- 数据结构
- C++
- STL
- C++11
- socket
- GCC
- GDB
- Makefile
- OpenCV
- Qt教程
- Unity 3D
- UE4
- 游戏引擎
- Python
- Python并发编程
- TensorFlow
- Django
- NumPy
- Linux
- Shell
- Java教程
- 设计模式
- Java Swing
- Servlet
- JSP教程
- Struts2
- Maven
- Spring
- Spring MVC
- Spring Boot
- Spring Cloud
- Hibernate
- Mybatis
- MySQL教程
- MySQL函数
- NoSQL
- Redis
- MongoDB
- HBase
- Go语言
- C#
- MATLAB
- JavaScript
- Bootstrap
- HTML
- CSS教程
- PHP
- 汇编语言
- TCP/IP
- vi命令
- Android教程
- 区块链
- Docker
- 大数据
- 云计算