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绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
jQuery+ajax实现用户登录验证
Sep 13 jQuery
jquery插件实现代码雨特效
Apr 24 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
PHP无敌近乎加密方式!
2010/07/17 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
javascript从image转换为base64位编码的String
2014/07/29 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
浅谈javascript中基本包装类型
2015/06/03 Javascript
详解JS面向对象编程
2016/01/24 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
微信小程序如何使用globalData的方法
2019/06/06 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
Python生成随机数的方法
2014/01/14 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
儿童学习python的一些小技巧
2018/05/27 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
python如何通过闭包实现计算器的功能
2020/02/22 Python
最新大学生自我评价
2013/09/24 职场文书
八年级音乐教学反思
2014/01/09 职场文书
大学军训感言800字
2014/02/27 职场文书
企业环保标语
2014/06/10 职场文书
大四毕业生自荐书
2014/07/05 职场文书
探究Mysql模糊查询是否区分大小写
2021/06/11 MySQL
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python