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 基础知识 被自己遗忘的
Oct 15 Javascript
DOM 脚本编程中的兄弟节点
Oct 31 Javascript
Javascript select下拉框操作常用方法
Nov 09 Javascript
GreyBox技术总结(转)
Nov 23 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
Oct 11 Javascript
jQuery操作cookie方法实例教程
Nov 25 Javascript
js实现文件上传表单域美化特效
Nov 02 Javascript
vue.js从安装到搭建过程详解
Mar 17 Javascript
微信小程序实现日历效果
Dec 28 Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 Javascript
vuex 实现getter值赋值给vue组件里的data示例
Nov 05 Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 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删除数组元素示例分享
2014/02/17 PHP
php猴子选大王问题解决方法
2015/05/12 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
php实现往pdf中加数字签名操作示例【附源码下载】
2018/08/07 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
URL编码转换,escape() encodeURI() encodeURIComponent()
2006/12/27 Javascript
jQuery 名称冲突的解决方法
2011/04/08 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
2013/08/19 Javascript
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
2015/04/12 Javascript
jQuery拖动布局其结果保存到数据库
2015/10/09 Javascript
基于javascript数组实现图片轮播
2016/05/02 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
javascript 封装Date日期类实例详解
2017/05/28 Javascript
详解webpack自动生成html页面
2017/06/29 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
2017/09/13 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
Python记录详细调用堆栈日志的方法
2015/05/05 Python
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
Tensorflow 同时载入多个模型的实例讲解
2018/07/27 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
一份全面的PHP面试问题考卷
2012/07/15 面试题
就业自荐书
2013/12/05 职场文书
假释思想汇报范文
2014/10/11 职场文书
群众路线教育实践活动调研报告
2014/11/03 职场文书
Python机器学习之底层实现KNN
2021/06/20 Python
Spring Boot 实现敏感词及特殊字符过滤处理
2021/06/29 Java/Android
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers