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 相关文章推荐
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
把jquery 的dialog和ztree结合实现步骤
Aug 02 Javascript
javascript浏览器窗口之间传递数据的方法
Jan 20 Javascript
一看就懂:jsonp详解
Jun 01 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
Sep 26 Javascript
浅谈JavaScript中的对象及Promise对象的实现
Nov 15 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
AngularJS 过滤器(自带和自建)详解
Sep 19 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 Javascript
vue iview 隐藏Table组件里的某一列操作
Nov 13 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
php中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
PHP ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
PHP 扩展Memcached命令用法实例总结
2020/06/04 PHP
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
JS的数组迭代方法
2015/02/05 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
2017/08/04 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
Vue文件配置全局变量的实例
2018/09/06 Javascript
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
python实现微信自动回复机器人功能
2019/07/11 Python
python图形用户接口实例详解
2019/12/16 Python
python缩进长度是否统一
2020/08/02 Python
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
2018/08/28 HTML / CSS
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
AURALog面试题软件测试方面
2013/10/22 面试题
销售实习自我鉴定
2013/12/07 职场文书
鼓舞士气的口号
2014/06/16 职场文书
幼儿园标语大全
2014/06/19 职场文书
精神病医院见习报告
2014/11/03 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
工作推荐信模板
2015/03/25 职场文书
2015年挂职干部工作总结
2015/05/14 职场文书
暖春观后感
2015/06/08 职场文书
2019个人工作总结
2019/06/21 职场文书
python实现图片批量压缩
2021/04/24 Python
MySQL 1130异常,无法远程登录解决方案详解
2021/08/23 MySQL