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 相关文章推荐
javascript 写类方式之四
Jul 05 Javascript
使用Java实现简单的server/client回显功能的方法介绍
May 03 Javascript
JQUERY dialog的用法详细解析
Dec 19 Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 Javascript
JQuery核心函数是什么及使用方法介绍
May 03 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
Dec 08 Javascript
vuejs如何配置less
Apr 25 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
vue-cli和v-charts实现可视化图表过程解析
Oct 08 Javascript
Vue记住滚动条和实现下拉加载的完美方法
Jul 31 Javascript
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
PHP5中使用DOM控制XML实现代码
2010/05/07 PHP
PHP运行模式的深入理解
2013/06/03 PHP
CentOS下PHP7的编译安装及MySQL的支持和一些常见问题的解决办法
2015/12/17 PHP
PHP 生成微信红包代码简单
2016/03/25 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
基于Jquery的实现回车键Enter切换焦点
2010/09/14 Javascript
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
JS中showModalDialog 的使用解析
2013/04/17 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
Javascript中replace()小结
2015/09/30 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
js is_valid_filename验证文件名的函数
2017/07/19 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
原生js实现随机点名
2020/07/05 Javascript
Python脚本实现12306火车票查询系统
2016/09/30 Python
如何利用Fabric自动化你的任务
2016/10/20 Python
python安装Scrapy图文教程
2017/08/14 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
python提取xml里面的链接源码详解
2019/10/15 Python
python操作gitlab API过程解析
2019/12/27 Python
如何学习Python time模块
2020/06/03 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
CSS3支持IE6, 7, and 8的边框border属性
2012/12/28 HTML / CSS
PHP如何防止SQL注入
2014/05/03 面试题
医生见习报告范文
2014/11/03 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
摩登时代观后感
2015/06/03 职场文书
党员反邪教心得体会
2016/01/15 职场文书