IE9及以下 span元素無法觸發鼠標事件解決辦法

原創

crli

2020-02-20 13:23

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就假裝這裏啥元素都沒有。。

哦了。。大功告成