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 相关文章推荐
js下用gb2312编码解码实现方法
Dec 31 Javascript
使用JS+plupload直接批量上传图片到又拍云
Dec 01 Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 Javascript
Javascript中神奇的this
Jan 20 Javascript
JS判断是否长按某一键的方法
Mar 02 Javascript
很棒的js选项卡切换效果
Jul 15 Javascript
AngularJs  Understanding Angular Templates
Sep 02 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
Apr 13 Javascript
JavaScript适配器模式详解
Oct 19 Javascript
Vue父子组件之间的通信实例详解
Sep 28 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
JavaScript的一些小技巧分享
Jan 06 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简单读取xml文件的方法示例
2017/04/20 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
Angular弹出模态框的两种方式
2017/10/19 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
js实现随机点名功能
2020/12/23 Javascript
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
Python两个内置函数 locals 和globals(学习笔记)
2016/08/28 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
Python魔法方法功能与用法简介
2019/04/04 Python
Django 静态文件配置过程详解
2019/07/23 Python
django 自定义过滤器(filter)处理较为复杂的变量方法
2019/08/12 Python
python pandas.DataFrame.loc函数使用详解
2020/03/26 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
法国奢华女性时尚配饰网上商店:Monnier Frères
2016/08/27 全球购物
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
Marriott国际:万豪国际酒店查询预订
2017/09/25 全球购物
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
英语翻译系毕业生求职信
2013/09/29 职场文书
财务副总经理工作职责
2013/11/25 职场文书
博士学位自我鉴定范文
2013/12/26 职场文书
婚前协议书
2014/04/15 职场文书
计算机实训报告总结
2014/11/05 职场文书
2015年大学迎新工作总结
2015/07/16 职场文书
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP
python关于集合的知识案例详解
2021/05/30 Python