如何防止浮动菜单被单击通过下面的IE中的链接

Question

All the searching I've done results in questions looking to achieve the opposite. In firefox my div layer containing a menu appears, floating above the other content when clicking another element on the page. The content beneath such as links are not clickable. This is the behaviour I want but it doesn't work that way in internet explorer. In IE gaps between the links on the menu allow links on the content beneath this div to be clicked. Also a google ad which appears below the floating div is clickable through the div. I want the div to be solid and prevent any content underneath from being clicked in IE, could anyone help with this please?

Answer 1

event propagation

meaning for ex that a click traverses all elements under the cursor into deep (capturing) and back (bubbling) posiblly fireing reactions from many elements ... a common mistake is to think about graphical relation instead DOM parent-child relation (between elements)

let's experiment:

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

so topDIV is the firstChild of BottomDIV

add some styling:

<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>

add reactions to events:

  <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>

now observe the behaviour in booth IE/FF to click and moseover;

Even under the cursor there's no graphical overlapping of 2 divs - to execute the topDIV reactions the event objects follows the relation parentchild and when returns fires olso the unwanted parent reactions; So the child is the problem :)

SOLUTIONS:

1 stop the bubbling (backflow)

create a crossbrowser function Stop Event Propagation

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

and rewrite every reactions of topDIV like for ex:

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

2 - brake the relation parent-child between 2 divs append topDIV directlly to the body

document.body.appendChild(topDIV);

and be sure you keep the top

topDIV.style.zIndex=1000; 

EN:) but not

I think it's a good moment to clarify .addEventListener('event', reaction , true ) which means the event fires at capturing stage

we are back before solutions 1,2 so we have a free flow of event parent-->child-->parent

what about clicking topDIV (anywhere) we fire just bottomDIV reaction ?

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

this way the click is captured by the parent that will react and SEP() will block propagation to the child.

Answer 2

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

Answer 3

I finally and accidentally discovered a workaround to stop IE behaving this way. When I added a fixed width to the div containing the menu the problem with being able to click conent underneath the div disappeared.