jquery实现人性化的有选择性禁用鼠标右键
jquery实现人性化的有选择性禁用鼠标右键
发布时间:2016-12-30 来源:查字典编辑
摘要:使用比较暴力的手段禁用鼠标右键是不人性化的,所以最好还是有选择性的禁用鼠标右键。代码实例如下:查字典教程网html,body{height:...

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

代码实例如下:

<!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教程学习
编程开发子分类