js判断鼠标位置是否在某个div中的方法

2023年6月11日上午5:02 • JavaScript

要判断鼠标位置是否在某个div中，可以通过以下步骤实现。

第一步：获取鼠标的位置信息

要判断鼠标位置是否在某个div中，首先需要获取鼠标在页面中的位置信息。可以通过以下代码来获取：

document.addEventListener('mousemove', function(e) {
  var x = e.clientX;
  var y = e.clientY;
  console.log('鼠标当前位置：x=' + x + ', y=' + y);
});

这段代码中的 clientX 和 clientY 分别代表鼠标在浏览器窗口中的横坐标和纵坐标，用于标识鼠标当前的位置。

第二步：判断鼠标位置是否在指定的div内

获取到鼠标的位置信息之后，就可以根据该信息来判断鼠标是否在指定的div内。可以通过以下代码来实现：

document.addEventListener('mousemove', function(e) {
  var x = e.clientX;
  var y = e.clientY;
  var div = document.getElementById('myDiv');
  var divX = div.offsetLeft;
  var divY = div.offsetTop;
  var divW = div.offsetWidth;
  var divH = div.offsetHeight;

  if (x >= divX && x <= (divX + divW) && y >= divY && y <= (divY + divH)) {
    console.log('鼠标在指定的div内');
  } else {
    console.log('鼠标不在指定的div内');
  }
});

这段代码中，getElementById() 用于获取指定id的元素，offsetLeft 和 offsetTop 分别代表指定元素的左偏移量和上偏移量，offsetWidth 和 offsetHeight 分别代表指定元素的宽度和高度。利用这些信息，可以判断出鼠标是否在指定的div内。

示例1：提示鼠标是否在指定div内

下面是一个例子，当鼠标进入指定的div内时，页面会弹出提示，并改变div的背景颜色，当鼠标移出指定div后，页面弹出另一个提示并将div的背景颜色变回原来的颜色。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>判断鼠标位置是否在指定div中</title>
  <style>
    #myDiv {
      width: 200px;
      height: 200px;
      background-color: #F0F0F0;
    }
  </style>
  <script>
    window.onload = function() {
      var div = document.getElementById('myDiv');
      div.addEventListener('mousemove', function(e) {
        var x = e.clientX;
        var y = e.clientY;
        var divX = div.offsetLeft;
        var divY = div.offsetTop;
        var divW = div.offsetWidth;
        var divH = div.offsetHeight;

        if (x >= divX && x <= (divX + divW) && y >= divY && y <= (divY + divH)) {
          console.log('鼠标在指定的div内');
          div.style.backgroundColor = '#00FF00';
        } else {
          console.log('鼠标不在指定的div内');
          div.style.backgroundColor = '#F0F0F0';
        }
      });
    };
  </script>
</head>

<body>
  <div id="myDiv"></div>
</body>
</html>

示例2：跳转到指定页面

下面是另一个例子，当鼠标进入指定的div内时，页面会自动跳转到指定的页面。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>判断鼠标位置是否在指定div中</title>
  <script>
    window.onload = function() {
      var div = document.getElementById('myDiv');
      div.addEventListener('mousemove', function(e) {
        var x = e.clientX;
        var y = e.clientY;
        var divX = div.offsetLeft;
        var divY = div.offsetTop;
        var divW = div.offsetWidth;
        var divH = div.offsetHeight;

        if (x >= divX && x <= (divX + divW) && y >= divY && y <= (divY + divH)) {
          console.log('鼠标在指定的div内');
          window.location.href = 'http://www.baidu.com';
        }
      });
    };
  </script>
</head>

<body>
  <div id="myDiv" style="width: 200px; height: 200px; background-color: #F0F0F0;"></div>
</body>
</html>

当鼠标进入指定的div后，页面会自动跳转到百度搜索页面。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js判断鼠标位置是否在某个div中的方法 - Python技术站