您的位置：首页 > 其它

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

2016-06-28 22:44 477 查看

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

哦了。。大功告成

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航