js 限制鼠标移动范围

崽崽的谷雨

已于 2022-08-03 14:34:09 修改

阅读量5.1k

点赞数

分类专栏： js html 文章标签： javascript

于 2022-06-23 17:44:18 首次发布

本文链接：https://blog.csdn.net/weixin_44058725/article/details/125431106

版权

js 同时被 2 个专栏收录

53 篇文章 2 订阅

订阅专栏

html

28 篇文章 1 订阅

订阅专栏

问题描述：

想要实现鼠标限制范围，那么就需要监听鼠标移入移出事件。并且移出时做个提示。在里面禁用鼠标事件。

实现步骤：

限制范围的思路：可以超出范围就提示，或者隐藏鼠标光标。借助 onmouseove、onmouseout事件然后动态设置限制的 dom的 cursor属性。 cursor：none 隐藏 ,cursor:auto显示。

js代码

js利用 onmouseover（移入）、onmouseout（移出）

onmouseover 事件会在鼠标指针移动到指定的元素上时发生。

onmouseout 事件会在鼠标指针移出指定的对象时发生。

cursor属性定义及使用说明:

span.crosshair {cursor:crosshair}
span.help {cursor:help}
span.wait {cursor:wait}

属性值:

值	描述
url	需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。

参考于：CSS cursor 属性 | 菜鸟教程

<!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>js限制鼠标范围</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .child {
      width: 400px;
      height: 400px;
      background: red;

    }
  </style>
</head>

<body>
  <div class="box">
    <div class="child">

    </div>
  </div>

</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>


  var child = document.getElementsByClassName("child")[0];
  var box = document.getElementsByClassName("box")[0]
  // console.log(box);

  child.onmouseover = function () {

    box.style.cssText = "cursor:auto";

  }

  child.onmouseout = function () {

    box.style.cssText = "cursor:none";

  }


</script>

</html>

jquery代码

利用mouseenter（移入）、mouseleave（移出）

<!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>js限制鼠标范围</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .child {
      width: 400px;
      height: 400px;
      background: red;

    }
  </style>
</head>

<body>
  <div class="box">
    <div class="child">

    </div>
  </div>

</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
 $(".child").mouseenter(function () {
    $(".box").css({ "cursor": "auto" }); //显示鼠标
  });
  $(".child").mouseleave(function () {
    $(".box").css({ "cursor": "none" }); //隐藏鼠标
  });

</script>

</html>

onmouseover 事件 | 菜鸟教程

拓展思维：

1.甚至可以移入移出禁用鼠标功能。

参考: 禁用鼠标事件的方法

2.再或者是类似于鼠标移到边界就不让其移动了。可以参考下面的拖拽，我觉得尽然 div块都可以拖拽到边缘就不让拖拽了，那鼠标移到到边缘不让其移动了，应该也是可行的（我没试过）。

<!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>js限制拖拽范围</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    #box1 {
      width: 500px;
      height: 500px;
      background: #999;
      position: relative;
      left: 100px;
      top: 100px;
    }

    #box {
      width: 100px;
      height: 100px;
      background: #334;
      position: absolute;
      cursor: move;
    }
  </style>
</head>

<body>
  <div id="box1">
    <div id="box"></div>
  </div>
</body>
<script>
  (function () {
    var dragging = false
    var boxX, boxY, mouseX, mouseY, offsetX, offsetY
    var box = document.getElementById('box')
    var box1 = document.getElementById('box1')

    // 鼠标按下的动作
    box.onmousedown = down
    // 鼠标的移动动作
    document.onmousemove = move
    // 释放鼠标的动作
    document.onmouseup = up

    // 鼠标按下后的函数,e为事件对象
    function down(e) {
      dragging = true

      // 获取元素所在的坐标
      boxX = box.offsetLeft
      boxY = box.offsetTop

      // 获取鼠标所在的坐标
      mouseX = parseInt(getMouseXY(e).x)
      mouseY = parseInt(getMouseXY(e).y)

      // 鼠标相对元素左和上边缘的坐标
      offsetX = mouseX - boxX
      offsetY = mouseY - boxY
    }

    // 鼠标移动调用的函数
    function move(e) {
      if (dragging) {
        // 获取移动后的元素的坐标
        var x = getMouseXY(e).x - offsetX
        var y = getMouseXY(e).y - offsetY

        // 计算可移动位置的大小， 保证元素不会超过可移动范围
        // 此处就是父元素的宽度减去子元素宽度
        var width = box1.clientWidth - box.offsetWidth
        var height = box1.clientHeight - box.offsetHeight

        // min方法保证不会超过右边界，max保证不会超过左边界
        x = Math.min(Math.max(0, x), width)
        y = Math.min(Math.max(0, y), height)

        // 给元素及时定位
        box.style.left = x + 'px'
        box.style.top = y + 'px'
      }
    }

    // 释放鼠标的函数
    function up(e) {
      dragging = false
    }

    // 函数用于获取鼠标的位置
    function getMouseXY(e) {
      var x = 0, y = 0
      e = e || window.event

      if (e.pageX) {
        x = e.pageX
        y = e.pageY
      } else {
        x = e.clientX + document.body.scrollLeft - document.body.clientLeft
        y = e.clientY + document.body.scrollTop - document.body.clientTop
      }
      return {
        x: x,
        y: y
      }
    }
  })()
// 本代码 参考与：https://www.jb51.net/article/198259.htm
</script>

</html>

本代码参考与：js 拖拽限制范围