div遮罩实现禁用鼠标(click、hover等)事件
这两天在帮老师做网页,今天想实现在一块区域内禁止鼠标的各种事件,本来是想在框架模板的js文件里去修改,但是改代码的时候有点凌乱。。。感觉应该自己把问题想复杂了。
所以想了想要是能实现在一个区域内(如:div)遮罩住区域下方的操作,强大的某度让我很快找到了答案,拿去一试,诶~还挺方便,一试就灵。
所以在此处贴下相应代码仅供参考:
1、Javascript 部分代码
1 function MaskIt(obj){ 2 var hoverdiv = '<div class="divMask" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background: #fff; opacity: 0; filter: alpha(opacity=0);z-index:5;"></div>'; 3 $(obj).wrap('<div class="position:relative;"></div>'); 4 $(obj).before(hoverdiv); 5 $(obj).data("mask",true); 6 } 7 function UnMaskIt(obj){ 8 if($(obj).data("mask")==true){ 9 $(obj).parent().find(".divMask").remove(); 10 $(obj).unwrap(); 11 $(obj).data("mask",false); 12 } 13 $(obj).data("mask",false); 14 }
2、调用方法
比如:我在html中有一个div的 id 是“needMask”
1 <div id="needMask"> 2 …… 3 <div>
调用时,就是用函数:
1 MaskIt($('#needMask'));
恩......end 希望能帮到有需要的盆友:)