微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐