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

最新推荐文章于 2022-04-01 19:40:22 发布

crli

最新推荐文章于 2022-04-01 19:40:22 发布

阅读量2.6k

点赞数

分类专栏： JavaScript 文章标签：鼠标事件 javascript bug ie 9 CSS

本文链接：https://blog.csdn.net/liningaa/article/details/51779422

版权

JavaScript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

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就假装这里啥元素都没有。。

哦了。。大功告成

crli

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
IE9及以下 span元素无法触发鼠标事件解决办法

IE9及以下 span元素无法触发事件解决办法今天向往常一样练习原生JS，做了个放大镜效果的小Demo，但是发现如下bug，测试了半天终于解决了！部分代码如下：html lang="en">head> meta charset="UTF-8" /> title>Documenttitle>head>style type="text/css"> *{mar
复制链接

扫一扫