JQuery模拟实现网页中自定义鼠标右键菜单功能


Posted in jQuery onNovember 14, 2018

前言

题外话.......最近在开发一个网站项目的时候,需要用到网页自定义右键菜单,在网上看了各路前辈大神的操作,头晕目眩,为了达到目的,突然灵机一动,于是便有了这篇文章.

先放个效果图(沾沾自喜,大神勿喷):

JQuery模拟实现网页中自定义鼠标右键菜单功能

废话不多说,进入正题:

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)?

引用一位前辈的: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 代码中 增添 两句1 $('#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.编写自定义菜单

达到的显示效果:

JQuery模拟实现网页中自定义鼠标右键菜单功能

废话不多上代码:

<!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>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

jQuery 相关文章推荐
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 #jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 #jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 #jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 #jQuery
jQuery+PHP实现上传裁剪图片
Jun 29 #jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 #jQuery
jquery使用FormData实现异步上传文件
Oct 25 #jQuery
You might like
在“咖啡之国”感受咖啡文化
2021/03/03 咖啡文化
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
PHP setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
PHP仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
PHP引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
关于JavaScript的gzip静态压缩方法
2007/01/05 Javascript
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
2013/03/25 Javascript
javascript 自定义回调函数示例代码
2014/09/26 Javascript
angular.element方法汇总
2015/01/07 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
JavaScript实现Excel表格效果
2020/02/07 Javascript
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
python实现朴素贝叶斯分类器
2018/03/28 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
Python通过for循环理解迭代器和生成器实例详解
2019/02/16 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
如何基于python操作json文件获取内容
2019/12/24 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
python实现人像动漫化的示例代码
2020/05/17 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
CSS3——齿轮转动关键代码
2013/05/02 HTML / CSS
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
大学军训的体会
2014/11/08 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
环保建议书作文300字
2015/09/14 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python
配置nginx负载均衡
2022/05/06 Servers