IE9及以下 span元素无法触发鼠标事件解决办法

来源：互联网发布：8051 单片机有哪些编辑：程序博客网时间：2024/05/16 15:05

IE9及以下 span元素无法触发鼠标事件解决办法

今天向往常一样练习原生JS，做了个放大镜效果的小Demo，但是发现如下bug，测试了半天终于解决了！

部分代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8" />    <title>Document</title></head><style type="text/css">    *{margin: 0;padding: 0}    img{border:none;}    #wrap{width: 350px;box-sizing: border-box;margin: 50px}    #imgContainer{width: 350px;height: 350px;box-sizing: border-box;border: 1px solid #000;position: relative;margin-bottom: 5px}    #maskImg{width: 100%;height: 100%;}    #maskTop{width: 100%;height: 100%; position: absolute;left: 0;top: 0;/*background: #fff;opacity: 0;filter: alpha(opacity=0**)这里是关键***/}    #mask{position: absolute;left:0;top: 0;width: 100px;height: 100px;background: #ffa;opacity: 0.5;filter: alpha(opacity=50);display: none;}</style><body>    <div id="wrap">        <div id="imgContainer">            <img id="maskImg" src="images/2.jpg">            <span id="mask"></span>            <span id="maskTop"></span>        </div>    </div><script type="text/javascript">var maskImg=document.getElementById("maskImg"),    oMaskTop=document.getElementById("maskTop"),    oMask=document.getElementById("mask");function addEvent(elem,type,hander){    if(elem.addEventListener){        elem.addEventListener(type,hander,false)    }else if(elem.attachEvent){        elem.attachEvent("on"+type,hander)    }else{        elem["on"+type]=hander    }}  function maskMove(event){    var event=event||window.event;    x=event.clientX-oMaskTop.getBoundingClientRect().left;    y=event.clientY-oMaskTop.getBoundingClientRect().top;    w=oMask.offsetWidth;    h=oMask.offsetHeight;    lf=x<w/2 ? 0:(x-w/2);    tp=y<h/2 ? 0:(y-h/2);    lf=lf>oMaskTop.offsetWidth-w?(oMaskTop.offsetWidth-w):lf;    tp=tp>oMaskTop.offsetHeight-h?(oMaskTop.offsetHeight-h):tp;    oMask.style.left = lf+'px';    oMask.style.top = tp+'px';}function maskOver(){    oMask.style.display="block";}function maskOut(){    oMask.style.display = 'none';}addEvent(oMaskTop,"mouseover",maskOver);addEvent(oMaskTop,"mousemove",maskMove);addEvent(oMaskTop,"mouseout",maskOut);</script></body></html>

本来想鼠标移动到oMastTop上时出现oMask,但是IE死活不出来。。后来尝试着在`<span id="mask">aaaaaa</span>` 这里面随便加个字，发现这个span只有字的大小,但是鼠标移动到span上就可以触发事件了，我擦。。我兴奋了。。。但是。。。它的width和height也太小了吧。。也不等于imgContainer的宽高啊。。。再后来我尝试着给oMask加个背景色。。我擦oMask终于牛逼了一回，终于变大了，终于跟他的爸爸imgContainer一样大了，而且各种事件也好使了。。。最后，为了欺骗观众给oMask 在加个opacity就假装这里啥元素都没有。。哦了。。大功告成

0 0