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 &amp;&amp;和||运算法的另类使用技巧
Nov 28 Javascript
jquery键盘事件使用介绍
Nov 01 Javascript
JS实现图片预加载无需等待
Dec 21 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 Javascript
JS获取iframe中longdesc属性的方法
Apr 01 Javascript
node.js学习之base64编码解码
Oct 21 Javascript
微信小程序 video组件详解
Oct 25 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
移动端web滚动分页的实现方法
May 05 Javascript
JavaScript手风琴页面制作
May 17 Javascript
layui的table中显示图片方法
Aug 17 Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 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分页示例代码
2007/03/19 PHP
php实现按文件名搜索文件的远程文件查找器
2014/05/10 PHP
ThinkPHP实现递归无级分类――代码少
2015/07/29 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
javascript中的undefined 与 null 的区别  补充篇
2010/03/17 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
2017/10/15 Javascript
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python使用matplotlib绘制动画的方法
2015/05/20 Python
Python使用Scrapy爬取妹子图
2015/05/28 Python
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
Python 转义字符详细介绍
2017/03/21 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
python爬虫增加访问量的方法
2019/08/22 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
英语简历自我评价
2014/01/26 职场文书
会计专业自我鉴定
2014/02/10 职场文书
空中乘务员岗位职责
2014/03/08 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python