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实现复制功能各浏览器支持情况实测
Jul 18 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
Sep 26 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 Javascript
canvas 实现中国象棋
Feb 17 Javascript
vue数据双向绑定的注意点
Jun 23 Javascript
用js屏蔽被http劫持的浮动广告实现方法
Aug 10 Javascript
jQuery 改变P标签文本值方法
Feb 24 jQuery
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
微信小程序如何访问公众号文章
Jul 08 Javascript
如何基于jQuery实现五角星评分
Sep 02 jQuery
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
Feb 15 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伪静态页面函数附使用方法
2008/06/20 PHP
PHP中通过fopen()函数访问远程文件示例
2014/11/18 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
Jquery中的层次选择器与find()的区别示例介绍
2014/02/20 Javascript
JS实现文件动态顺序载入的方法
2015/03/07 Javascript
javascript实现汉字转拼音代码分享
2015/04/20 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
BootStrap的table表头固定tbody滚动的实例代码
2016/08/24 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
关于vue单文件中引用路径的处理方法
2018/01/08 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
2019/11/12 Javascript
Python生成随机MAC地址
2015/03/10 Python
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
pygame实现成语填空游戏
2019/10/29 Python
django列表筛选功能的实现代码
2020/03/27 Python
Python调用Redis的示例代码
2020/11/24 Python
Python爬虫简单运用爬取代理IP的实现
2020/12/01 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
伦敦最著名的老字号百货公司:Selfridges(塞尔福里奇百货)
2016/07/25 全球购物
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
德尔福集团DELPHI的笔试题
2012/02/22 面试题
电子专业推荐信范文
2013/11/18 职场文书
《美丽的公鸡》教学反思
2014/02/25 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
社区宣传标语口号
2015/12/26 职场文书
2019感恩宣传标语!
2019/07/05 职场文书
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL
Python实现双向链表
2022/05/25 Python