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 01 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
js判断当前页面用什么浏览器打开的方法
Jan 06 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
Jul 07 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 Javascript
JavaScript框架Angular和React深度对比
Nov 20 Javascript
angular 组件通信的几种实现方式
Jul 13 Javascript
浅谈Vue.use的使用
Aug 29 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 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
全国中波电台频率表
2020/03/11 无线电
一些花式咖啡的配方
2021/03/03 冲泡冲煮
hessian 在PHP中的使用介绍
2010/12/13 PHP
PHP面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
PHP在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
关于svn冲突的解决方法
2013/06/21 PHP
php多层数组与对象的转换实例代码
2013/08/05 PHP
PHP对象递归引用造成内存泄漏分析
2014/08/28 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
JavaScript与函数式编程解释
2007/04/27 Javascript
JS维吉尼亚密码算法实现代码
2010/11/09 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
Python全局变量操作详解
2015/04/14 Python
python 获得任意路径下的文件及其根目录的方法
2019/02/16 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
Python 下载及安装详细步骤
2019/11/04 Python
用Python生成HTML表格的方法示例
2020/03/06 Python
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
高级Java程序员面试题
2016/06/23 面试题
培训协议书范本
2014/04/22 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
2014年“世界无车日”活动方案
2014/09/21 职场文书
详解python的内存分配机制
2021/05/10 Python
详解Oracle块修改跟踪功能
2021/11/07 Oracle