jquery实现人性化的有选择性禁用鼠标右键


Posted in Javascript onJune 30, 2014

使用比较暴力的手段禁用鼠标右键是不人性化的,所以最好还是有选择性的禁用鼠标右键。

代码实例如下:

<!DOCTYPE html> <html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.45it.com/" /> 
<title>三水点靠木</title> 
<style type="text/css">
html,body{height:100%}
div{
width:150px;
height:50px;
background:#CCC;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
function jQuery_isTagName(ev,arr){
ev=$.event.fix(ev);
var target=ev.target||ev.srcElement;
if(arr&&$.inArray(target.tagName.toString().toUpperCase(),arr)==-1){
return false;
}
return true;
}

$(document).bind("contextmenu",function(ev){
if(!jQuery_isTagName(ev,['INPUT','TEXTAREA'])){
ev.preventDefault();
return false;
}
return true;
})
})
</script> 
</head> 
<body>
<div id="thediv"></div> 
<textarea></textarea>
</body> 
</html>

上面的代码实现了我们的要求,下面对代码的实现过程做一下介绍。

代码注释:

1.$(document).ready(function(){}),当文本结构完全加载完毕再去执行函数中的代码。
2.function jQuery_isTagName(ev,arr){},此函数可以判断元素是否在可以使用右键菜单之列,第一个参数是事件对象,第二个参数是一个数组,数组元素是可以使用右键菜单的标签名称。
3.ev=$.event.fix(ev),实现事件对象在各个浏览器的兼容性,fix()函数是jquery内部使用的,当然也可以这么用。
4.var target=ev.target||ev.srcElement,获取事件源对象。
5.if(arr&&$.inArray(target.tagName.toString().toUpperCase(),arr)==-1){return false;},判断指定的标签元素是否在数组中,如果数组中没有指定的标签,那么就返回false。
6.return true,返回true。
8.$(document).bind("contextmenu",function(ev){}),为document文档注册contextmenu事件处理函数。
9.if(!jQuery_isTagName(ev,['INPUT','TEXTAREA'])){
ev.preventDefault();
return false;
}
如果如果指定标签不在可以使用右键菜单的列表中,那么就使用ev.preventDefault()阻止事件冒泡,这很重要,否则的话如果有元素嵌套,虽然子元素禁用了右键菜单,但是右键子元素的时候,还是会弹出右键菜单,因为事件传递到父元素上去了,return false也可以禁用右键菜单了

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
通过正则格式化url查询字符串实现代码
Dec 28 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
JavaScript中数组常见操作技巧
Sep 01 Javascript
vue 粒子特效的示例代码
Sep 19 Javascript
mpvue小程序循环动画开启暂停的实现方法
May 15 Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 Javascript
es6函数之尾递归用法实例分析
Apr 25 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 Javascript
Vue如何实现验证码输入交互
Dec 07 Vue.js
javascript时间函数大全
Jun 30 #Javascript
js取得html iframe中的元素和变量值
Jun 30 #Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
Jun 30 #Javascript
js实现的点击div区域外隐藏div区域
Jun 30 #Javascript
js实现特定位取反原理及示例
Jun 30 #Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 #Javascript
jQuery+ajax实现鼠标单击修改内容的思路
Jun 29 #Javascript
You might like
第七节--类的静态成员
2006/11/16 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
javascript语言结构小记(一)
2011/09/10 Javascript
javascript闭包传参和事件的循环绑定示例探讨
2014/04/17 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
基于JavaScript实现 网页切出 网站title变化代码
2016/04/03 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
Angular4开发解决跨域问题详解
2017/08/28 Javascript
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
js实现随机点名
2021/01/19 Javascript
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
Python中Collection的使用小技巧
2014/08/18 Python
Python3遍历目录树实现方法
2015/05/22 Python
Python学习笔记之解析json的方法分析
2017/04/21 Python
django使用html模板减少代码代码解析
2017/12/12 Python
python3.6+django2.0开发一套学员管理系统
2018/03/03 Python
Python实现的简单计算器功能详解
2018/08/25 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
PyCharm下载和安装详细步骤
2019/12/17 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
优质的学校老师推荐信
2013/10/28 职场文书
金融专业个人求职信范文
2013/11/28 职场文书
同学聚会主持词
2014/03/18 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
田径运动会广播稿
2015/08/19 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
golang gopm get -g -v 无法获取第三方库的解决方案
2021/05/05 Golang