jQuery contextmenu事件详解

时间：03-07来源：作者：点击数：

在 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 所示。