JQuery模拟实现网页中自定义鼠标右键菜单功能
需积分: 0 160 浏览量
2020-10-17
18:07:31
上传
评论
收藏 77KB PDF 举报
JQuery模拟实现网页中自定义鼠标右键菜单功能模拟实现网页中自定义鼠标右键菜单功能
主要给大家介绍了关于利用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属性用于返回触发当前事件时按下的键盘按键或鼠标按钮。
对于键盘和鼠标事件，该属性用于确定你按下的是哪一个键盘按键或鼠标按钮。
评论0
最新资源