题外话....... 最近在开发一个网站项目的时候, 需要用到网页自定义右键菜单, 在网上看了各路前辈大神的操作, 头晕目眩, 为了达到目的, 突然灵机一动, 于是便有了这篇文章.
先放个效果图(沾沾自喜, 大神勿喷):
废话不多说, 进入正题:
1. 首先 我们要禁用掉原网页中右键菜单
- //jQuery 代码
- $(selector).on('contextmenu', function () {
- return false;
- })
这样目标区域的右键菜单就无法使用了
- demo1:
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="description" content="">
- <meta name="keywords" content="">
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
- <style>
- #demo1 {
- display: block;
- background-color: turquoise;
- color: #fff;
- font-size: 100px;
- text-align: center;
- width: 100%;
- height: 500px;
- }
- </style>
- </head>
- <div id="demo1">
- <p > 此区域 (带颜色) 被禁用了右键菜单</p>
- </div>
- <body>
- <script src="https://cdn.bootCSS.com/jquery/2.2.4/jquery.min.js"></script>
- <script>
- $('#demo1').on('contextmenu',function () {
- // 禁用掉 #demo1 的右键菜单
- return false;
- })
- </script>
- </body>
- </HTML>
2. 接下来开始编写我们自己的菜单弹出窗口
思路: 通过捕获鼠标点击时的事件在屏幕上被触发的位置(x,y), 然后把我们自己编写的窗口利用 CSS 中的 "定位" 显示在哪里.
2.1: 如何获取到鼠标在屏幕上点击的事件?
jQuery Event.which 属性 --- 引用 jQuery 中文手册中的内容
which 属性用于返回触发当前事件时按下的键盘按键或鼠标按钮.
对于键盘和鼠标事件, 该属性用于确定你按下的是哪一个键盘按键或鼠标按钮.
which 属性对 DOM 原生的 event.keyCode 和 event.charCode 进行了标准化.
适用的事件类型主要有键盘事件: keypress,keydown,keyup, 以及鼠标事件: mouseup,mousedown.
该属性属于 jQuery 的 Event 对象(实例)
- $(selector).on('mousedown',function(event){
- var code=event.which;// 返回值是一个 Number 类型
- })
event.which 属性值 | 对应的鼠标按钮 |
---|---|
1 | 鼠标左键 |
2 | 鼠标中键(滚轮键) |
3 | 鼠标右键 |
- $('#demo1').on('mousedown',function(event){// 紧接上面的实例 demo1 在 script 中插入这段代码即可获取到鼠标点击事件
- var code=event.which;// 判断是单机了鼠标哪个键(1,2,3)
- alert('区域被鼠标点击了 ---'+code);
- })
2.2 如何获取事件发生的位置(X,Y)?
引用一位前辈的: 链接: https://www.cnblogs.com/king-ying/p/5936429.html
event 对象中的属性:
- event.offsetX // 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标
- event.offsetY // 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标
- event.pageX // 设置或获取鼠标指针位置相对于页面左上角的 x 坐标
- event.pageY // 设置或获取鼠标指针位置相对于页面左上角的 y 坐标
- event.clientX // 设置或获取鼠标指针位置相对于浏览器窗口可视区域的 x 坐标, 其中客户区域不包括窗口自身的控件和滚动条
- event.clientY // 设置或获取鼠标指针位置相对于浏览器窗口可视区域的 y 坐标, 其中客户区域不包括窗口自身的控件和滚动条
- event.screenX // 设置或获取获取鼠标指针位置相对于屏幕的 x 坐标
- event.screenY // 设置或获取鼠标指针位置相对于屏幕的 y 坐标
在上面的 demo1 的 JS 代码中 增添 两句
- $('#demo1').on('mousedown',function(event){
- var code=event.which;
- var x=event.pageX;// 相对于页面左上角 X 的坐标
- var y=event.pageY;// 相对于页面左上角 Y 的坐标
- alert('区域被点击了'+code+"位置:"+'('+x+','+y+')');
- })
为了方便观察 重新做了一个 demo2(复制粘贴即可运行):
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="description" content="">
- <meta name="keywords" content="">
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
- <style>
- #demo1 {
- display: block;
- background-color: turquoise;
- color: #fff;
- font-size: 100px;
- text-align: center;
- width: 100%;
- height: 500px;
- }
- #click-pos{
- display:block;
- background-color: bisque;
- color: #000;
- margin: 20px;
- float: left;
- min-width: 200px;
- font-size: 20px;
- text-align: center;
- }
- </style>
- </head>
- <label id="click-pos">
显示内容
- </label>
- <div id="demo1">
- <p > 此区域 (带颜色) 被禁用了右键菜单</p>
- </div>
- <body>
- <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
- <script>
- // 禁用掉区域的默认右键事件
- $('#demo1').on('contextmenu',function () {
- return false;
- })
- $('#demo1').on('mousedown',function(event){
- var code=event.which;
- var x=event.pageX;// 相对于页面左上角 X 的坐标
- var y=event.pageY;// 相对于页面左上角 Y 的坐标
- var mouse="";// 点击类型
- switch(code){
- case 1:mouse="左键";
- break;
- case 2:mouse="中键(滚轮)";
- break;
- case 3:mouse="右键";
- break;
- default:break;
- }
- $('#click-pos').HTML("点击类型:"+mouse+"-- 位置 - X:"+x+'-Y:'+y);// 显示到页面上
- })
- </script>
- </body>
- </HTML>
核心部分差不多就是上面的内容
3. 编写自定义菜单
达到的显示效果:
废话不多上代码:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="description" content="">
- <meta name="keywords" content="">
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
- <style>
- #demo1 {
- display: block;
- background-color: turquoise;
- color: #fff;
- font-size: 50px;
- text-align: center;
- width: 100%;
- height: 500px;
- }
- #click-pos {
- display: block;
- background-color: bisque;
- color: #000;
- margin: 20px;
- float: left;
- min-width: 200px;
- font-size: 20px;
- text-align: center;
- }
- /* 右键菜单遮罩层 */
- #layer {
- position: fixed;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- background-color: transparent;
- }
- #mouse-menu {
- position: fixed;
- z-index: 5;
- left: 0;
- right: 0;
- width: 130px;
- max-height: 120px;
- overflow: auto;
- display: block;
- background-color: #f1ecec;
- list-style: none;
- padding: 10px;
- text-align: center;
- border-radius: 8px;
- box-shadow: 0 0 4px #ddd;
- }
- /* 菜单的每个选项 */
- #mouse-menu li {
- border-top: 1px solid #000;
- }
- #mouse-menu li:last-child {
- border-bottom: 1px solid #000;
- }
- /* 当鼠标移入时 */
- #mouse-menu li:hover {
- background-color: deepskyblue;
- }
- </style>
- </head>
- <label id="click-pos">
显示内容
- </label>
- <div id="demo1">
- <p > 在此区域启用自定义菜单, 原菜单已禁用</p>
- </div>
- <!-- 最外层为遮罩层, 用于绑定点击任意位置关闭菜单事件 -->
- <!-- 默认隐藏 -->
- <div id="layer" style="display:none">
- <ul id="mouse-menu">
- <li > 选项卡 1</li>
- <li > 选项卡 2</li>
- <li > 选项卡 3</li>
- <li > 选项卡 4</li>
- <li > 选项卡 5</li>
- <li > 选项卡 6</li>
- </ul>
- </div>
- <body>
- <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
- <script>
- // 禁用掉区域的默认右键事件
- $('#demo1').on('contextmenu', function () {
- return false;
- })
- $('#layer').on('contextmenu', function () {
- return false;
- })
- $('#demo1').on('mousedown', function (event) {
- var code = event.which;
- var x = event.pageX;// 相对于页面左上角 X 的坐标
- var y = event.pageY;// 相对于页面左上角 Y 的坐标
- var mouse = "";// 点击类型
- switch (code) {
- case 1: mouse = "左键";
- break;
- case 2: mouse = "中键(滚轮)";
- break;
- case 3: mouse = "右键";
- break;
- default: break;
- }
- $('#click-pos').HTML("点击类型:" + mouse + "-- 位置 - X:" + x + '-Y:' + y);// 坐标显示到页面上
- // 如果是鼠标右键召唤出弹出菜单
- if (code == 3) {
- $('#layer').show();
- // 改变菜单的位置到事件发生的位置
- $('#mouse-menu').CSS('left', x);
- $('#mouse-menu').CSS('top', y);
- }
- })
- // 点击选项卡时触发
- $('#layer').on('click', 'li', function (event) {
- // 显示当前点击的内容
- console.log("ssss");
- var text = $(this).HTML();
- $('#click-pos').HTML(text);
- // event.stopPropagation();// 阻止事件冒泡
- })
- // 点击遮罩层时隐藏需要的菜单
- $('#layer').on('click', function () {
- $(this).hide();
- })
- </script>
- </body>
- </HTML>
emmmm 以上就是今天的内容(也许有点粗糙. 第一次写这么长, 有问题欢迎评论或者私信)
来源: https://www.cnblogs.com/roseAT/p/9955309.html