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 相关文章推荐
JQuery验证工具类搜集整理
Jan 16 Javascript
js获取系统的根路径实现介绍
Sep 08 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
Mar 18 Javascript
JavaScript Math.floor方法(对数值向下取整)
Jan 09 Javascript
javaScript实现滚动新闻的方法
Jul 30 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
Webpack框架核心概念(知识点整理)
Dec 22 Javascript
详解微信JS-SDK选择图片遇到的坑
Aug 15 Javascript
vue点击当前路由高亮小案例
Sep 26 Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 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在不同页面间传递Json数据示例代码
2013/06/08 PHP
php操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
php中使用session_set_save_handler()函数把session保存到MySQL数据库实例
2014/11/06 PHP
php实现简单文件下载的方法
2015/01/30 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
PHP+Ajax 检测网络是否正常实例详解
2016/12/16 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
省市选择的简单实现(基于zepto.js)
2016/06/21 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
python django集成cas验证系统
2014/07/14 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
python元组的概念知识点
2019/11/19 Python
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
几道Web/Ajax的面试题
2016/11/05 面试题
关于期中考试的反思
2014/02/02 职场文书
班主任个人工作反思
2014/04/28 职场文书
个人投资计划书
2014/05/01 职场文书
工作证明格式及范本
2014/09/12 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
安全生产先进个人总结
2015/02/15 职场文书
小学生读书笔记
2015/07/01 职场文书
银行求职信范文
2019/05/13 职场文书
python实现Nao机器人的单目测距
2021/09/04 Python
python小型的音频操作库mp3Play
2022/04/24 Python
Python时间操作之pytz模块使用详解
2022/06/14 Python