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

(编辑：jimmy 日期: 2024/11/19 浏览：2)

前言

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

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

废话不多说,进入正题:

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="/UploadFiles/2021-04-02/jquery.min.js">

2.接下来开始编写我们自己的菜单弹出窗口
思路:通过捕获鼠标点击时的事件在屏幕上被触发的位置(x,y),然后把我们自己编写的窗口利用CSS中的"定位"显示在哪里.
2.1:如何获取到鼠标在屏幕上点击的事件"htmlcode">

$(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)"htmlcode">

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="/UploadFiles/2021-04-02/jquery.min.js">

核心部分差不多就是上面的内容
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="/UploadFiles/2021-04-02/jquery.min.js">

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

        
            上一篇：laydate时间日历插件使用方法详解
            下一篇：你应该了解的JavaScript Array.map()五种用途小结