Question

我所做的所有搜索都会导致寻找相反的问题。在firefox中，我的div层包含一个菜单，当点击页面上的另一个元素时浮动在其他内容之上。链接下面的内容不可点击。这是我想要的行为，但它在Internet Explorer中不起作用。在IE中菜单上的链接之间的间隙允许点击此div下面的内容上的链接。此外，显示在浮动div下方的Google广告可通过div进行点击。我希望div能够稳固并防止在IE中点击任何内容，有人可以帮忙吗？

Answer 1

事件传播

对于ex来说意味着点击遍历光标下的所有元素进入深度（捕获）和返回（冒泡）可能会激发来自许多元素的反应...一个常见的错误是考虑图形关系而不是DOM父子关系（元素之间）

让我们进行实验：

<div id="bottomDIV" 
onclick="rBot(event)" onMouseOver="this.style.background='olive'"
onMouseOut="this.style.background='#FF6'">bottomDIV
<div id="topDIV">topDIV</div></div>
</div>

所以topDIV是BottomDIV的第一个孩子

添加一些样式：

<style>
#bottomDIV{ width:200px;height:200px; background:#FF6;}
#topDIV{
width:200px;height:200px;
position:relative;
background:rgba(0,255,255,.5);
top:80px;left:100px;}
</style>

添加对事件的反应：

  <script>
//add reaction for bottomDIV
bottomDIV=document.getElementById('bottomDIV')
rBot=function(e){evt=e||event;alert(evt.type + 
            "\n"+( evt.srcElement||evt.target).id +"\n") ;//FF/IE
}


// add reactions on same event type for topDIV 
topDIV=document.getElementById('topDIV');
rTop=function(e){
        evt=e||event;
        if(evt.target)alert(evt.target.id); else alert(evt.srcElement.id)
        }

topDIV.addEventListener('click',rTop,false);
topDIV.addEventListener('mouseover',function(){this.style.background=
                                            'rgba(200,200,100,.7)'},false)
topDIV.addEventListener('mouseout',function(){this.style.background=
                                            'rgba(0,255,255,.5)'},false)
</script>

现在观察IE / FF展位中的行为，点击并转移;

即使在光标下也没有2个div的图形重叠 - 为了执行topDIV反应，事件对象跟在父亲关系之后，当返回触发不需要的父反应时;所以孩子就是问题：）

解：

1停止冒泡（回流）

创建一个crossbrowser函数Stop Event Propagation

function SEP(evt){
                 try{evt.stopPropagation()}
                 catch(err){;evt.cancelBubble=true;}
      } //(IE/FF)

并重写topDIV的每一个反应，例如ex：

rTop=function(e){evt=e||event;SEP(evt);var elm=this;alert(elm.id);}

2 - 在两个div之间制造关系亲子 将topDIV直接附加到身体

document.body.appendChild(topDIV);

并确保你保持顶部

topDIV.style.zIndex=1000;

EN :)但不是

我认为这是澄清.addEventListener（'event'，反应， true ）的好时机，这意味着事件会在捕获阶段触发

我们回到解决方案1,2之前，所以我们有一个自由流动的事件父 - ＆gt; child - ＆gt; parent

如果点击topDIV（任何地方）我们只会触发bottomDIV反应？

justBottomReation=function(e){evt=e||event;SEP(evt);elm=this;alert(elm.id)}
bottomDIV.addEventListener('click',justBottomReation, true)

这样点击是由父母捕捉的，他们会做出反应，而SEP（）会阻止传播给孩子。

Answer 2

如果您使用的是jQuery，可以使用blockUI。

Answer 3

我终于意外地发现了一种解决方法来阻止IE以这种方式运行。当我为包含菜单的div添加固定宽度时，能够点击div下面的conent的问题就消失了。

如何防止浮动菜单被点击进入IE下面的链接

3 个答案: