在jQuery中,常用的编辑事件只有一种,那就是contextmenu事件。
举例:禁用鼠标右键
<!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>
浏览器预览效果如下图所示。
分析:
虽然鼠标右键功能被禁止了,但是我们依旧可以用快捷键,如使用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>
默认情况下,预览效果如下图所示。
当我们在div元素上点击鼠标右键,此时预览效果如下图所示。