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 相关文章推荐
dwr spring的集成实现代码
Mar 22 Javascript
JavaScript DOM 学习第二章 编辑文本
Feb 19 Javascript
JavaScript基础知识之数据类型
Aug 06 Javascript
javascript实现playfair和hill密码算法
Dec 07 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
Sep 14 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 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
DC游戏Steam周三特惠 《蝙蝠侠》阿卡姆系列平史低
2020/04/09 欧美动漫
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
用javascript自动显示最后更新时间
2007/03/15 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
Js 导出table内容到Excel的简单实例
2013/11/19 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
详解vue 组件之间使用eventbus传值
2017/10/25 Javascript
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
python设置值及NaN值处理方法
2018/07/03 Python
Python pip配置国内源的方法
2020/02/14 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
Python操作Jira库常用方法解析
2020/04/10 Python
Python如何实现的二分查找算法
2020/05/27 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
python3排序的实例方法
2020/10/20 Python
美国一家全面的在线零售鞋类公司:SHOEBACCA
2017/01/06 全球购物
澳大利亚领先的皮肤诊所:Skin Matrix(抗衰老、痤疮专家、药妆护肤)
2018/05/20 全球购物
如何定义一个可复用的服务
2014/09/30 面试题
电子商务专业学生的自我鉴定
2013/11/28 职场文书
四年大学生活的自我评价范文
2014/02/07 职场文书
领导调研接待方案
2014/02/27 职场文书
住宅使用说明书
2014/05/09 职场文书
初中教师业务学习材料
2014/05/12 职场文书
党员教师个人对照检查材料范文
2014/09/25 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
致运动员的广播稿
2015/08/19 职场文书
大学文艺委员竞选稿
2015/11/19 职场文书
2019事业单位个人工作总结范文
2019/08/26 职场文书
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis