jquery实现人性化的有选择性禁用鼠标右键

所属分类: 网络编程 / JavaScript 阅读数: 1319
收藏 0 赞 0 分享

使用比较暴力的手段禁用鼠标右键是不人性化的,所以最好还是有选择性的禁用鼠标右键。

代码实例如下:

<!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也可以禁用右键菜单了

更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多