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)?
引用一位前辈的:链接: https://www.cnblogs.com/king-ying/p/5936429.html
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.编写自定义菜单
达到的显示效果:
废话不多上代码:
<!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>
emmmm以上就是今天的内容(也许有点粗糙.第一次写这么长,有问题欢迎评论或者私信)
JQuery模拟网页中自定义鼠标右键菜单的更多相关文章
- js自定义鼠标右键菜单
document.oncontextmenu = function(e) { return false; } document.onmousedown = function(e) { switch(e ...
- JavaScript自定义鼠标右键菜单
下面为JavaScript代码 window.onload = function () { //好友列表 var f = 0; //判断指定id的元素在页面中是否存在 if (document.get ...
- jq自定义鼠标右键菜单
效果: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
- Win10 自定义鼠标右键菜单
1. 点击文件鼠标右键显示软件 1.1 步骤 win+R输入regedit进入注册表 定位到HKEY_CLASSES_ROOT\*\shell下 在shell创建一个你想要的右键文件 例如:Kinok ...
- Win7如何自定义鼠标右键菜单 添加用记事本打开
鼠标右键用记事本打开.reg Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\*\shell\Notepad] @="用记事本 ...
- Win7如何自定义鼠标右键菜单 添加新建WORD文档
鼠标右键添加新建WORD文档.reg Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\.doc] @="Word.Docume ...
- Win7如何自定义鼠标右键菜单 添加新建文本文档
鼠标右键新建文本文档.reg REGEDIT4 [HKEY_CLASSES_ROOT\.txt] @="txtfile" "Content Type"=&quo ...
- Win7如何自定义鼠标右键菜单 添加新建EXCEL文档
鼠标右键添加新建EXCEL文档.reg Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\.xls] "Content Type ...
- Win7如何自定义鼠标右键菜单 添加新建PowerPoint文档
鼠标右键添加新建PowerPoint文档.reg Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\.ppt] "Content ...
随机推荐
- 在Windows下为PHP5.6安装redis扩展和memcached扩展
一.php安装redis扩展 1.使用phpinfo()函数查看PHP的版本信息,这会决定扩展文件版本 2.根据PHP版本号,编译器版本号和CPU架构, 选择php_redis-2.2 ...
- JDK自带工具native2ascii
背景:在做Java开发的时候,常常会出现一些乱码,或者无法正确识别或读取的文件,比如常见的validator验证用的消息资源(properties)文件就需要进行Unicode重新编码.原因是java ...
- spring boot(7)-mybatis全注解化
关于配置数据库可以参考上一篇文章,这里只讲mybatis pom.xml <!-- 引入mybatis --> <dependency> <groupId>org. ...
- error:将字符串转换为 uniqueidentifier 时失败
sql server查询中出现 将字符串转换为 uniqueidentifier 时失败异常 原因为id设置为uniqueidentifier 字段,在where查询时需要做转换cast(id as ...
- Google Developers 中国网站正式发布
Google Developers 中国网站 (developers.google.cn) 正式发布!Google Developers 中国网站是特别为中国开发者而建立的,它汇集了 Google 为 ...
- 【Oracle】锁表处理 SQL 错误: ORA-00054: 资源正忙, 但指定以 NOWAIT 方式获取资源, 或者超时失效
问题描述有时候ORACLE数据的某些表由于频繁操作,而且比较大,会导致锁表(死锁). 问题分析(1)锁的分析ORACLE里锁有以下几种模式:0:none1:null 空2:Row-S 行共享(RS): ...
- Java学习---RMI 技术分析[Hessian]
一.什么是Hessian Hessian 是一个基于 binary-RPC 实现的远程通讯 library.使用二进制传输数据.Hessian通常通过Web应用来提供服务,通过接口暴露.Servlet ...
- Linux下的Mysql的主从备份
MySQL复制概述 MySQL数据库支持同步复制.单向.异步复制,在复制的过程中一个服务器充当主服务,而一个或多个服务器充当从服务器.主服务器将更新写入二进制日志文件,并维护文件的一个索引以跟踪日志循 ...
- Python 处理脚本的命令行参数(三)：使用argparse
# coding:utf-8 # 测试argparse模块的基本用法 import argparse # 创建参数解析对象,并添加脚本用法帮助 parser = argparse.ArgumentPa ...
- 1、Spring Cloud - 微服务简介
前言: 业界大牛马丁.福勒(Martin Fowler) 这样描述微服务: 论文网址:https://martinfowler.com/articles/microservices.html 就目前而 ...