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>

 

posted @ 2022-07-28 15:41  落晴鸢  阅读(1296)  评论(0)    收藏  举报