jQuery自定义元素右键点击事件_jquery关闭浏览器右键事件启动自定义右键事件-优快云博客

本文介绍如何在网页中自定义鼠标右键点击行为，通过jQuery阻止默认右键菜单，并实现左键增大字体、右键减小字体的效果，增强页面交互性。

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.youkuaiyun.com/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

大多数情况下我们使用左键来进行页面交互，而右键大部分对于开发者来说是审查元素的，有的时候我们也要自定义鼠标右键点击行为来达到更好的交互性，常见的有漫画左键前进、右键后退。

第一步我们要屏蔽浏览器默认的右键点击行为，即阻止弹出框。

首先要将阻止弹出函数绑定到目标元素上：

//阻止浏览器默认右键点击事件$("div").bind("contextmenu", function(){    return false;})
  1
2
3
4

如此一来，div元素的右击事件就被屏蔽了，而浏览器其他区域不受影响，如果你想在整个页面屏蔽右击事件，只需这样做：

document.oncontextmenu = function() {    return false;}
  1
2
3

接下来就可以为元素绑定右击响应函数了：

$("div").mousedown(function(e) {    console.log(e.which);    //右键为3    if (3 == e.which) {        $(this).css({            "font-size": "-=2px"        });    } else if (1 == e.which) {        //左键为1        $(this).css({            "font-size": "+=3px"        });    }})
  1
2
3
4
5
6
7
8
9
10
11
12
13
14

示例效果为右击字体缩小，左击字体变大，且其它区域可以响应默认右击事件。

这里写图片描述

完整代码：

<head>    <style type="text/css">    div{        font-size:20px;    }    </style>    <script src="../jquery.js"></script>    <script>    $(function() {        //阻止浏览器默认右键点击事件        /*document.oncontextmenu = function() {            return false;        }*/        //某元素组织右键点击事件        $("div").bind("contextmenu", function(){            return false;        })        $("div").mousedown(function(e) {            console.log(e.which);            //右键为3            if (3 == e.which) {                $(this).css({                    "font-size": "-=2px"                });            } else if (1 == e.which) {                //左键为1                $(this).css({                    "font-size": "+=3px"                });            }        })    })    </script></head><body>    <div>        div    </div></body>
  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41