jquery实现人性化的有选择性禁用鼠标右键
使用比较暴力的手段禁用鼠标右键是不人性化的,所以最好还是有选择性的禁用鼠标右键。
代码实例如下:
<!DOCTYPEhtml><html>
<head>
<metacharset="utf-8">
<metaname="author"content="http://www.45it.com/"/>
<title>毛票票</title>
<styletype="text/css">
html,body{height:100%}
div{
width:150px;
height:50px;
background:#CCC;
}
</style>
<scripttype="text/javascript"src="mytest/jQuery/jquery-1.8.3.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
functionjQuery_isTagName(ev,arr){
ev=$.event.fix(ev);
vartarget=ev.target||ev.srcElement;
if(arr&&$.inArray(target.tagName.toString().toUpperCase(),arr)==-1){
returnfalse;
}
returntrue;
}
$(document).bind("contextmenu",function(ev){
if(!jQuery_isTagName(ev,['INPUT','TEXTAREA'])){
ev.preventDefault();
returnfalse;
}
returntrue;
})
})
</script>
</head>
<body>
<divid="thediv"></div>
<textarea></textarea>
</body>
</html>
上面的代码实现了我们的要求,下面对代码的实现过程做一下介绍。
代码注释:
1.$(document).ready(function(){}),当文本结构完全加载完毕再去执行函数中的代码。
2.functionjQuery_isTagName(ev,arr){},此函数可以判断元素是否在可以使用右键菜单之列,第一个参数是事件对象,第二个参数是一个数组,数组元素是可以使用右键菜单的标签名称。
3.ev=$.event.fix(ev),实现事件对象在各个浏览器的兼容性,fix()函数是jquery内部使用的,当然也可以这么用。
4.vartarget=ev.target||ev.srcElement,获取事件源对象。
5.if(arr&&$.inArray(target.tagName.toString().toUpperCase(),arr)==-1){returnfalse;},判断指定的标签元素是否在数组中,如果数组中没有指定的标签,那么就返回false。
6.returntrue,返回true。
8.$(document).bind("contextmenu",function(ev){}),为document文档注册contextmenu事件处理函数。
9.if(!jQuery_isTagName(ev,['INPUT','TEXTAREA'])){
ev.preventDefault();
returnfalse;
}
如果如果指定标签不在可以使用右键菜单的列表中,那么就使用ev.preventDefault()阻止事件冒泡,这很重要,否则的话如果有元素嵌套,虽然子元素禁用了右键菜单,但是右键子元素的时候,还是会弹出右键菜单,因为事件传递到父元素上去了,returnfalse也可以禁用右键菜单了