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获取数组任意个不重复的随机数组元素
Mar 15 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
Feb 23 Javascript
函数式 JavaScript(一)简介
Jul 07 Javascript
Javascript中的arguments与重载介绍
Mar 15 Javascript
jQuery动画效果图片轮播特效
Jan 12 Javascript
node.js实现博客小爬虫的实例代码
Oct 08 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
JS实现上传图片实时预览功能
May 22 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
JavaScript实现的开关灯泡点击切换特效示例
Jul 08 Javascript
countUp.js实现数字滚动效果
Oct 18 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
Aug 30 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
PHPMailer安装方法及简单实例
2008/11/25 PHP
apache+php+mysql安装配置方法小结
2010/08/01 PHP
php Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
php之XML转数组函数的详解
2013/06/07 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
Laravel框架自定义分页样式操作示例
2020/01/26 PHP
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
javascript实现回车键提交表单方法总结
2015/01/10 Javascript
jQuery中delegate()方法用法实例
2015/01/19 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
jQuery实现返回顶部功能
2016/02/23 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
2016/06/17 Javascript
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
nodejs开发——express路由与中间件
2017/03/24 NodeJs
vue实现表格数据的增删改查
2017/07/10 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
vue实现与安卓、IOS交互的方法
2018/11/02 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
vue实现多级菜单效果
2019/10/19 Javascript
用vite搭建vue3应用的实现方法
2021/02/22 Vue.js
三个python爬虫项目实例代码
2019/12/28 Python
10个python3常用排序算法详细说明与实例(快速排序,冒泡排序,桶排序,基数排序,堆排序,希尔排序,归并排序,计数排序)
2020/03/17 Python
HTML5 Canvas鼠标与键盘事件demo示例
2013/07/04 HTML / CSS
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
Zavvi荷兰:英国大型音像制品和图书游戏零售商
2018/03/22 全球购物
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
实习生求职自荐信
2014/02/07 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
嘉宾邀请函
2015/01/31 职场文书
观看《筑梦中国》纪录片心得体会
2016/01/18 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python