02 js中使用onmousemove事件中使用offsetX出现闪烁问题
在做js放大镜时，使用offsetX后出现
每移动一次蒙版就会出现一次闪烁，就会不断的回到左上角。
事件onmousemove(event)事件的event对象
原因：刚开始是以为是onmousemove事件的冒泡导致的。后面是发现是因为offsetX和offsetY的问题：以offsetX为例：
再移动就会又以大边框为对象，计算大的距离，所以就会出现闪烁。
mousemove事件触发的事件源元素在不断切换，当鼠标移动时会移动到div中这时 offset的源元素不再是父级的div而是移动的div 这是offset值是相对于移动的div 所以是较小的值 ，所以会回到左上角。
解决办法
1. 在蒙版加一个pointer-events: none样式就可以了，这个属性除了指示该元素不是鼠标事件的目标之外，值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。
2. 不使用offsetX和offsetY。可以使用getBoundingClientRact方法。
附上一个放大镜代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#smallImg {
width: 300px;
height: 300px;
background: url(./boke.jpg);
background-size: cover;
position: relative;
}
#smallDiv {
width: 100px;
height: 100px;
background-color: rgba(0,0,0,0.3);
position: absolute;
display: none;
pointer-events: none;
}
#bigDiv {
width: 300px;
height: 300px;
border: 1px solid red;
position: absolute;
left: 320px;
top: 0;
overflow: hidden;
display: none;
}
#bigImg {
position: absolute;
width: 900px;
height: 900px;
}
</style>
</head>
<body>
<div>
<div id="smallImg">
<div id="smallDiv"></div>
</div>
<div id="bigDiv">
<img id="bigImg" src="./boke.jpg" alt="">
</div>
</div>
<script>
var smallImg = document.getElementById("smallImg");
var smallDiv = document.getElementById("smallDiv");
var bigDiv = document.getElementById("bigDiv");
var bigImg = document.getElementById("bigImg");
smallImg.onmouseover = function() {
smallDiv.style.display = "block";
bigDiv.style.display = "block";
}
smallImg.onmouseout = function() {
smallDiv.style.display = "none";
bigDiv.style.display = "none";
}
smallImg.onmousemove = function(e) {
console.log(e.offsetX,e.offsetY);
var left = e.offsetX - 50;
var top = e.offsetY - 50;
if(left < 0) {
left = 0;
}
if(left >= 200) {
left = 200;
}
if(top < 0) {
top = 0;
}
if(top >= 200) {
top = 200;
}
smallDiv.style.left = left + "px";
smallDiv.style.top = top + "px";
bigImg.style.left = -3*left + "px";
bigImg.style.top = -3*top + "px";
}
</script>
</body>
</html>
