脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → 有选择性禁用鼠标右键

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

 更新时间：2014年06月30日 16:00:46   投稿：whsnow  
与其使用比较暴力的手段禁用鼠标右键，还不如有选择性人性化的的禁用鼠标右键,需要的朋友可以参考下

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

代码实例如下:

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

您可能感兴趣的文章:

相关文章

  • jQuery实现美观的多级动画效果菜单代码

    jQuery实现美观的多级动画效果菜单代码

    这篇文章主要介绍了jQuery实现多级动画效果菜单代码,涉及jquery针对页面元素的遍历及事件绑定操作页面元素样式变换的技巧,界面美观实用,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • jQuery的animate函数实现图文切换动画效果

    jQuery的animate函数实现图文切换动画效果

    animate()在jquery中作为一个方法,可用于创建动画效果，jquery中的animate()方法让那个页面增加了很好的视觉效果
    2015-05-05
  • jQuery插件scroll实现无缝滚动效果

    jQuery插件scroll实现无缝滚动效果

    今天给大家分享一款页面无缝滚动的jquery.scroll插件。 支持上下左右，淡入淡出，滚动时间设置，动画时间设置，鼠标经过是否停止设置，滚动鼠标液动条看下页面的切换效果。该插件适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。
    2015-04-04
  • JQery jstree 大数据量问题解决方法

    JQery jstree 大数据量问题解决方法

    Jquery 结合jstree 动态生成一棵树，如果某一节点下目录超过500个，IE 会提示是否允许JS脚本运行，并且目录加载不全，大约只加载了300左右。
    2010-03-03
  • jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法

    jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法

    这篇文章主要介绍了jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法,需要的朋友可以参考下
    2017-12-12
  • 基于jquery实现的服务器验证控件的启用和禁用代码

    基于jquery实现的服务器验证控件的启用和禁用代码

    用户点击下一步时，不对Display=none的新增区域表单进行验证，需要在用户点击“取消增加时”，禁用服务器验证控件。反之，启用服务器验证控件。
    2010-04-04
  • Jquery滑动门/tab切换实现方法完整示例

    Jquery滑动门/tab切换实现方法完整示例

    这篇文章主要介绍了Jquery滑动门/tab切换实现方法,结合完整实例形式分析了Jquery滑动门/tab切换具体操作技巧与页面元素动态操作实现方法,需要的朋友可以参考下
    2020-06-06
  • JQuery模板插件 jquery.tmpl 动态ajax扩展

    JQuery模板插件 jquery.tmpl 动态ajax扩展

    在上一篇JQuery模板插件-jquery.tmpl中介绍了这款插件。有时我们需要去动态的ajax去加载模板，或者数据，根据url参数或者其他信息加载不同的模板，数据
    2011-11-11
  • jQuery lazyload 的重复加载错误以及修复方法

    jQuery lazyload 的重复加载错误以及修复方法

    jQuery lazyload是一款延迟加载图片的的插件，原意是按需加载，当图片出现在可视区域时进行加载，但是官方的插件经过firebug的检测可知，并不能节省流量开支，反而有重复加载的现象。
    2010-11-11
  • jquery实现滑动楼梯效果

    jquery实现滑动楼梯效果

    这篇文章主要为大家详细介绍了jquery实现滑动楼梯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09

最新评论