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

前言

题外话.最近，在开发网站项目时，需要使用网页上的自定义右键菜单。看完网上各种前辈的操作，你都晕了。为了达到目的，你突然灵机一动，于是有了这篇文章。

先放个效果图(沾沾自喜，不喷):

废话不多说，进入话题：

1.首先，我们应该禁用原始网页中的右键菜单

//JQuery代码$(选择器)。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 ' c content=' meta name=' viewport ' content=' width=device-width，initial-scale=1，maximum-scale=1，user-scalable=no ' style # demo 1 { display : block；背景色：绿松石；color: # ffffont-size : 100 px；文本对齐：中心；宽度： 100%；高度： 500 px；} /style/headdiv id='demo1'p此区域(带颜色)已禁用。右键菜单/p/div正文脚本src=' http :https://cdn . bootscs.com/jquery/2 . 2 . 4/jquery . min . js '/script script $(' # Demon ')。on ('contextmenu '，function(){//禁用右键菜单返回false的# demo1})/脚本/正文/html2。接下来，开始编写我们自己的菜单弹出窗口

Idea :捕捉鼠标点击屏幕时事件的触发位置(x，y)，然后利用CSS中的‘定位’显示自己写的窗口。

2.1:如何在屏幕上获取鼠标点击事件？

哪个属性引用了JQuery中文手册的内容

当触发当前事件时，使用哪个属性返回按下的键盘键或鼠标按钮。

对于键盘和鼠标事件，此属性用于确定您按下了哪个键盘按钮或鼠标按钮。

使DOM本机事件标准化的属性.

适用的事件类型主要包括键盘事件：按键、向下键和向上键，鼠标事件：向上键和向下键。

此属性属于jQuery的事件对象(实例)

$(选择器)。on('mousedown '，function(event){ var code=event . what；//返回值为Number类型})鼠标按键1鼠标左键2鼠标中键(滚动键)3鼠标右键对应事件的属性值. what

$ ('# demo1 ')。on ('mousedown '，function(event){//就在上面的示例demo1将这段代码插入脚本之后，就可以得到鼠标点击事件var code=event.which//确定哪一个鼠标按钮(1，2，3)报警('该区域被鼠标点击了-'代码)；})2.2如何获取事件的位置(X，Y)？

引用前置任务的：事件对象中的属性：

Event.offsetX //设置或获取鼠标指针位置相对于触发事件事件的对象的x坐标. offset//设置或获取鼠标指针位置相对于触发事件事件的对象的y坐标. pageX //设置或获取鼠标指针位置相对于页面事件左上角的x坐标. pageY //设置或获取鼠标指针位置相对于页面左上角的y坐标事件. clientX //设置或获取鼠标指针位置相对于浏览器窗口可见区域的x坐标，其中客户端区域不包括窗口自身控件和滚动条事件. clientY //设置或获取鼠标指针位置相对于浏览器窗口可见区域的y坐标。 工作区不包括窗口本身的控件和滚动条。设置或获取鼠标指针位置相对于屏幕的x坐标。设置或获取鼠标指针相对于屏幕位置的y坐标。

加两句1 $ ('# demo1 ')。on ('mousedown '，function (event) {var code=event。哪个；var x=event.pageX//x相对于页面左上角的坐标var y=event.pageY//相对于页面左上角的Y坐标提醒(' 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，最大-scale=1，user-scalable=no ' style # demo 1 { display : block；背景色：绿松石；color : # ffffont-size : 100 px；文本对齐：中心；宽度： 100%;高度： 500像素；} # click-pos {显示：块；背景-颜色：浓汤；color: # 000margin: 20px向左浮动：最小宽度： 200像素；font-size : 20px文本对齐：中心；} /style/headlabel id='click-pos '显示内容/labeldiv id='demo1'p此区域（带颜色)被禁用了右键菜单/p/div正文脚本src=' http :https://cdn。bootscs。com/jquery/2。2 .4/jquery。量滴js/禁用掉区域的默认右键事件$('#demo1 ').on('contextmenu '，function(){ return false；}) $('#demo1 ').on('mousedown '，function(event){ var code=event。什么；var x=event.pageX//相对于页面左上角X的坐标var y=event.pageY//相对于页面左上角Y的坐标var mouse=//点击类型开关（代码){ case 1:mouse='左键；打破；案例' 2:mouse='中键（滚轮)';打破；案例3:mouse='右键；打破；default : break } $(' # click-pos ').html(")点击类型："鼠标"位置-x : ' x '-y : ' y)；//显示到页面上})/脚本/正文/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，最大-scale=1，user-scalable=no ' style # demo 1 { display : block；背景色：绿松石；color : # ffffont-size : 50px；文本对齐：中心；宽度： 100%;高度： 500像素；} # click-pos {显示：块；背景-颜色：浓汤；color: # 000margin: 20px向左浮动：最小宽度： 200像素；font-size : 20px文本对齐：中心；} /* 右键菜单遮罩层*/#层{位置：固定；左： 0；top : 0；宽度： 100%;高度： 100%;背景色-:透明；} #鼠标菜单{位置：已修复；z指数： 5；左： 0；右： 0；宽度： 130像素；最大高度： 120像素；飞越：汽车；显示器：块；背景-color : # f1 ecec；列表样式：无；padding: 10px文本对齐：中心；边界半径： 8px盒影： 0 4px # DDD；} /* 菜单的每个选项*/#鼠标菜单李{边框-顶部： 1px实心# 000；} #鼠标菜单李：最后一个孩子{边框-底部： 1px实心# 000；} /* 当鼠标移入时*/#鼠标菜单李：悬停{底色：深蓝天空；} /style/headlabel id='click-pos '显示内容/labeldiv id='demo1' p在此区域启用自定义菜单，原菜单已禁用/p/div！-最外层为遮罩层，用于绑定点击任意位置关闭菜单事件- !-默认隐藏-div id=' layer ' style=' display : none ' ul id=' mouse-menu ' Li选项卡1/李莉选项卡2/李莉选项卡3/李莉选项卡4/李莉选项卡5/li li选项卡6/li /ul/divbody脚本src=' http :https://cdn。bootscs。com/jquery/2。2 .4/jquery。量滴js /脚本脚本/禁用掉区域的默认右键事件$('#demo1 ').on('contextmenu '，function(){ return false；})$(“# layer”).on('contextmenu '，function(){ return false；}) $('#demo1 ').on('mousedown '，function(event){ var code=event。什么；var x=event.pageX//相对于页面左上角X的坐标var y=event.pageY//相对于页面左上角Y的坐标var mouse=//点击类型开关（代码){ case 1: mouse='左键；打破；案例2:鼠标='中键（滚轮)';打破；案例3:鼠标='右键；打破；default : break } $(“# click-pos”).html(")点击类型："鼠标"位置-x : ' x '-y : ' y)；//坐标显示到页面上//如果是鼠标右键召唤出弹出菜单如果(代码==3) { $('#layer ').show()；//改变菜单的位置到事件发生的位置$(' #鼠标菜单')。css('left '，x)；$(' #鼠标菜单')。css('top '，y)；} }) //点击选项卡时触发$(“# layer”).on('click '，' li '，function (event) { //显示当前点击的内容控制台。原木(' SSSS ')；var text=$(this).html()；$('#click-pos ').html(文本);//事件。stopperpagation()；//阻止事件冒泡}) //点击遮罩层时隐藏需要的菜单$(“# layer”).on('click ')，function () { $(this).hide()；})/脚本/正文/html总结

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