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 相关文章推荐
yepnope.js 异步加载资源文件
Sep 08 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
JS(JQuery)操作Array的相关方法介绍
Feb 11 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
javascript实现unicode与ASCII相互转换的方法
Dec 10 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
浅谈JavaScript中promise的使用
Jan 11 Javascript
Angular2关于@angular/cli默认端口号配置的问题
Jul 15 Javascript
VUE axios上传图片到七牛的实例代码
Jul 28 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
Aug 28 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
JS利用prototype给类添加方法操作详解
Jun 21 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实现手机归属地查询API接口实现代码
2012/08/27 PHP
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
PHP实现转盘抽奖算法分享
2020/04/15 PHP
PHP中的self关键字详解
2019/06/23 PHP
在Laravel中实现使用AJAX动态刷新部分页面
2019/10/15 PHP
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
JS链式调用的实现方法
2013/03/07 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
JS实现灵巧的下拉导航效果代码
2015/08/25 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
js实现登录验证码
2016/12/22 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
[43:35]EG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
python处理html转义字符的方法详解
2016/07/01 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
pandas的排序和排名的具体使用
2019/07/31 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
Pytorch数据拼接与拆分操作实现图解
2020/04/30 Python
python入门教程之基本算术运算符
2020/11/13 Python
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
爱耳日活动总结
2014/04/30 职场文书
广播体操比赛口号
2014/06/10 职场文书