jQuery contextmenu事件详解

在 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>

预览效果如图 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：点击鼠标右键后的效果

jQuery contextmenu事件详解

相关文章