jq自定义鼠标右键菜单
效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="test/datatables/jquery-1.10.2.js"></script>
<style>
*{
padding:0;
margin:0;
}
.button{
width:200px;
height:50px;
background:grey;
text-align:center;
line-height:50px;
margin:0 auto;
margin-top:50px;
}
.menu{
padding: 1px;
border: 1px solid #B8CBCB;
background-color: #fff;
-moz-box-shadow: 2px 2px 5px #666;
-webkit-box-shadow: 2px 2px 5px #666;
box-shadow: 2px 2px 5px #666;
width:140px;
position:absolute;
display:none;
}
ul li{
list-style:none;
}
.li_separate{
line-height: 0;
margin: 3px;
border-bottom: 1px solid #B8CBCB;
font-size: 0;
}
.menu_a{
display: block;
height: 25px;
line-height: 24px;
padding: 0 5px 0 25px;
color: #000;
font-size: 12px;
text-decoration: none;
}
.menu_a:hover{
background: #348CCC;
color:white;
}
</style>
</head>
<body>
<div class="button">点击</div>
<div class="menu">
<ul>
<li><a href="javascript:;" class="menu_a">复制</a></li>
<li><a href="javascript:;" class="menu_a">粘贴</a></li>
<li class="li_separate"></li>
<li><a href="javascript:;" class="menu_a">删除</a></li>
</ul>
</div>
<script>
//屏蔽浏览器右键菜单
document.oncontextmenu=function(){
return false;
}
$('.button').on('mousedown',function(e){
var key=e.which;//获取鼠标键位
if(key==3){//1：代表左键；2：代表中键；3：代表右键
//获取右键点击坐标
var x=e.clientX;
var y=e.clientY;
$('.menu').show().css({left:x,top:y});
}
})
//点击任意部位隐藏
$(document).on('click',function(){
$('.menu').hide();
})
</script>
</body>
</html>
jq自定义鼠标右键菜单的更多相关文章
- 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 ...
- JQuery模拟网页中自定义鼠标右键菜单
题外话.......最近在开发一个网站项目的时候,需要用到网页自定义右键菜单,在网上看了各路前辈大神的操作,头晕目眩,为了达到目的,突然灵机一动,于是便有了这篇文章. 先放个效果图(沾沾自喜,大神勿喷 ...
- 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 ...
随机推荐
- [CSS Hack]解決IE6、IE7、IE8、Firefox的瀏覽器相容性問題！
每次調CSS最令人頭痛的就是瀏覽器校正問題,因為每個瀏覽器對CSS的解釋都不太一樣,Firefox本身算是比較照規矩來,處理上比較簡單,但是遇到微軟的IE系列頭就大了,雖然都是IE,但是IE6.IE7 ...
- re.I re.L re.M re.S re.U re.X
- [codevs1159]最大全0子矩阵(悬线法)
解题关键:悬线法模板题.注意此模板用到了滚动数组. #include<cstdio> #include<cstring> #include<algorithm> # ...
- css实现三角形（转）
css实现三角形 (2012-09-10 14:17:26) 标签: css 三角形 杂谈 分类: 网页制作 css实现三角形的原理是:当元素的宽高为0,边框(border)不为0时,四个角边框交界重 ...
- Angular问题02 创建模块失败、 angular-cli名称问题、升级angular-cli
1 创建模块失败 1.1 问题描述 利用 ng g m 模块名 创建新模块时出错 1.2 错误信息 1.3 问题原因 angular-cli 版本出现问题 1.4 解决办法 卸载掉之前使用的 angu ...
- ngx-bootstrap使用01 安装ngx-bootstrap和bootstrap及其使用、外部样式引入
1 版本说明 2 新建一个angular项目 ng new 项目名 --stayle=scss 代码解释:创建一个样式文件格式为SCSS的angular项目 技巧01:由于我angular-cli的版 ...
- Tensorflow梯度下降应用
import tensorflow as tfimport numpy as np #使用numpy生成随机点x_data = np.random.rand(100)y_data = x_data*0 ...
- Swing窗口Linux下不支持最大化问题
Swing窗口Linux下不支持最大化问题 摘自:https://www.linuxidc.com/Linux/2009-06/20519.htm [日期:2009-06-17] 来源:www.qua ...
- android自定义视图属性(atts.xml，TypedArray)学习
是一个用于存放恢复obtainStyledAttributes(AttributeSet, int[], int, int)或 obtainAttributes(AttributeSet, int[] ...
- linux core文件机制
在程序不寻常退出时,内核会在当前工作目录下生成一个core文件(是一个内存映像,同时加上调试信息).使用gdb来查看core文件,可以指示出导致程序出错的代码所在文件和行数. 1.core文件的生成开 ...