Search code examples
jqueryinternet-explorerstoppropagation

jQuery: stopPropagation with IE8

I'm using the following code to prevent clicking through a full screen div, with no background color, image, or opacity. Just a regular ol' div.

  $('.modalOverlay').click(function (evt) {
    evt.stopPropagation();
    alert('no'); 
  });

And the CSS

.modalOverlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;    
}

On the browsers that I've tried it on (Chrome 16.0.912.77, Opera 11.61, Safari 5.0.4, Firefox 3.6.25, SeaMonkey 2.1) it works fine.

On IE8 (64bit), it doesn't work on clickable things. Such as links. If I click somewhere in the background on IE8, it will work. If I click a link, the link click still goes through.

Now if I specify a background color on IE8, it will work. But since opacity on IE is a pain, the div would be a solid color, and I don't want that. Is there a way to get it to work on IE8, without specifying a background color?

Thanks.

Solution

  • Just add background: black; opacity: 0; filter: alpha(opacity=0); - how hard is it?