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插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 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
写一个用户在线显示的程序
2006/10/09 PHP
php字符串截取问题
2006/11/28 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
JavaScript 脚本将当地时间转换成其它时区
2009/03/19 Javascript
javascript中的document.open()方法使用介绍
2013/10/09 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
javascript实现函数柯里化与反柯里化过程解析
2019/10/08 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
python每隔N秒运行指定函数的方法
2015/03/16 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
Django框架 querySet功能解析
2019/09/04 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
印度低票价航空公司:GoAir
2017/10/11 全球购物
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
打造完美自荐信
2014/01/24 职场文书
求职面试个人自我评价
2014/02/28 职场文书
户外活动策划方案
2014/03/12 职场文书
2014年后勤管理工作总结
2014/12/01 职场文书
家长意见和建议怎么写
2015/06/04 职场文书
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电