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  希望能帮到有需要的盆友:)

时间: 2024-10-02 23:22:12

div遮罩实现禁用鼠标(click、hover等)事件的相关文章

用DIV遮罩解决checkbox勾选无效的问题

在前端开发的过程中,遇到一种情况,需要勾选,为了用户的操作便捷就将click事件放到了DIV上.(其中使用了knockout.js) 代码大概如下: <div id="one" data-biind="click:clickevent"> <input type="checkbox"><span>有事请勾我</span> </div> 但是这样写出现了一个奇怪的现象,鼠标点击div一切正

局域/整体禁用鼠标右键

一:局域性禁用鼠标右键 onpaste="alert('此处可调用模特弹窗');return false" 二:整个页面禁用鼠标右键 function click(e) { if (document.all) { if (event.button==1||event.button==2||event.button==3) { oncontextmenu='return false'; } } if (document.layers) { if (e.which == 3) { onco

jQuery禁用鼠标右键代码实例

jQuery禁用鼠标右键代码实例:很多用户可能由于某些需要,有禁止鼠标右键这么一个要求,下面就是一个能够实现此功能的代码.代码如下: $(function(){ $(document).bind("contextmenu",function(e){ return false; }) }) 以上代码实现了我们的要求,直接套用就可以了. 原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13503 更多内容可以参阅:

如何使用jQuery禁用鼠标右键

如何使用jQuery禁用鼠标右键:很多网站都有这样的效果,那就是浏览者无法使用鼠标右键,这样也就禁止了很多功能,比如复制功能,尽管这个对于了解网页知识的人并没有太大的作用,不过还是在这里介绍一下此功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.5

div遮罩弹框口

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <title>群组设置</title> <style> .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height:

JavaScript实现禁用键盘和鼠标的点击事件

编写自定义的JavaScript函数maskingKeyboard()和rightKey(); maskingKeyboard():禁用键盘 rightKey():禁用鼠标右键 <script type="text/javascript"> //屏蔽键盘的单击事件 function maskingKeyboard(){ if(event.keyCode == 8){ event.keyCode = 0; event.returnValue = false; alert(&q

div 遮罩层 弹窗

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

禁用鼠标选中DOM

我爱这一小段代码 // 禁用鼠标选中DOM元素 document.onselectstart = function() { return false; };

zedgraph中禁用鼠标滚轮变焦(禁止画图区域随鼠标滚动改变XY轴,定位)(转)

禁用鼠标滚轮变焦的zedgraph功能 如果zgc是你ZedGraphControl实例,请使用: zgc.ZoomButtons = MouseButtons.None; zgc.ZoomButtons2 = MouseButtons.None; 这将禁用用鼠标选择区域缩放. 您还需要设置: zgc.ZoomStepFraction = 0; 要禁用使用鼠标滚轮缩放.