IE 下元素空白区域与图片重叠无法触发鼠标事件

IE 浏览器下，透明的元素与另一非空白的元素重叠时（透明的元素在上，非空白的元素在下），

如果上方透明元素与下方元素中非空白的部分存在重叠（该元素的内容很可能不是填充满该元素的），则在该重叠区域发生的交互操作和鼠标事件由下方的元素接管，透明的元素不能触发鼠标事件。

上方的透明元素是指：无背景(background:none、transparent)，无可见内容(如 display none,visibllity hidden,left:-9999px; 不包括 opacity) 

下方的非空白元素是指：该元素包含文字、图片等可见内容， 但背景图片和背景颜色不算入内。

 IE 下  透明元素背后的文字可以被选中，图片可以另存为，鼠标事件可以触发，超链接可以点击，的确是为用户的交互操作着想

复制代码
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />   
      <title>test</title>
      <style>
          .ad-gallery{
              position: relative;
              width: 400px;
              height: 350px;              
              overflow: hidden;
          }
          .ad-gallery .ad-prev,.ad-gallery .ad-next{
              position: relative;
              display: inline-block;
              *display: inline;
              *zoom:1;
              float: left;
              width:200px;
              height: 100%; 
              z-index:100;        
              background-image: url('about:blank'); /* IE ，与元素重叠的区域为 img（该元素在上img在下),且该元素无背景(background:none、transparent)，无可见内容(如 display none,visibllity hidden,left:-9999px; ) ,则该区域无法触发鼠标事件 */
          }

          .ad-gallery .prevHandle ,.ad-gallery .nextHandle{
              position:absolute;
              left:0; 
              right: 0;
              top: 0;
              bottom: 0;              
              margin:auto;
              *top:50%;
              *left:50%;
              *margin-left: -50px;
              *margin-top: -75px;
              width: 100px;
              height: 150px;
              line-height: 150px;
              background: #313131;
              font-size: 14px;
              text-align: center;
              color: #ddd; 
              background: #313131;
              display: none; 
              /*visibility: hidden;*/
              /*left:-9999px; */
          }

          .ad-gallery .ad-img{
              position: absolute;
              top:0;
              left:0;
              z-index: 0;
              width: 100%;
              height: 100%;
          }

          .ad-gallery .desc{
              position: absolute;
              left: 0px;
              bottom: 0px;
              margin:0;
              width: 100%;
              height: 50px; 
              line-height: 50px;     
              background: #313131;
              color: #eee;
              text-indent: 10px;
              z-index: 99;
          }

          .opacity60{
              *filter:alpha(opacity=60);/*IE6、7*/
              -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=60)";    /*IE8*/            
              opacity: 0.6;
          }

      </style>
 </head>
 <body>
<div id="gallery" class="ad-gallery">
    <img class="ad-img" src="http://images.cnblogs.com/cnblogs_com/ecalf/431722/o_7_4c135bd08efea.jpg" />
    <div class="ad-prev"><div class="prevHandle opacity60">上一张</div></div>
    <div class="ad-next"><div class="nextHandle opacity60">下一张</div></div>
    <div class="desc opacity60">image description</div>
 </div>


<!--test-->
<div style="position:relative;width:100px;height:111px;border:1px solid red;overflow:hidden;">
    <img id="elm1" class="ad-img" width="100" height="50" style="display:block;position:absolute;left:0;top:0;z-index:1;" src="http://images.cnblogs.com/cnblogs_com/ecalf/431722/o_7_4c135bd08efea.jpg" onmouseover="alert(this.id);" />

  <!--change elm2's background to test-->
    <div id="elm2" style="position:absolute;left:0;top:0;z-index:10;width:111px;height:100px;border:1px solid green;background:transparent;" onmouseover="alert(this.id);"></div>
</div>
<script>

var gallery = document.getElementById("gallery");
var elmInGallery = gallery.getElementsByTagName("*");
var mouseover = function(event){
    event = event||window.event;
    var target = (event.srcElement||event.target);
    console.log('============= event log ===============');
    console.log('1. ',this.className,' | ',target.className,' | ',target==this?'eventSrc':'eventTraval');

    if((/ad-prev|ad-next/).test(this.className)){
        console.log('2. ','handle active');
        this.getElementsByTagName("div")[0].style.display = "block";
    }
};
for(var i=0;i<elmInGallery.length;i++){
    elmInGallery[i].onmouseover = mouseover;
}


</script>

</body>
</html>
复制代码

 

 

　　

posted @   ecalf  阅读(1183)  评论(4)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· 展开说说关于C#中ORM框架的用法！
· SQL Server 2025 AI相关能力初探
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库
点击右上角即可分享
微信分享提示