首页 > JavaScript 阅读:462

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:点击鼠标右键后的效果

关注微信公众号「站长严长生」,在手机上阅读所有教程,随时随地都能学习。本公众号由C语言中文网站长运营,每日更新,坚持原创,敢说真话,凡事有态度。

魏雪原二维码
微信扫描二维码关注公众号

优秀文章