当前位置：网站首页>JS limit mouse movement range

JS limit mouse movement range

2022-06-25 21:36:00 【Xiaozai's Valley rain】

Problem description ：

You want to limit the range of the mouse , So you need Monitor the mouse Move in and out event . also Prompt when moving out .

Implementation steps ：

Limits The idea of ： Sure Out of range Prompt , Or hide Mouse cursor

js Code

js utilize onmouseover（ move ）、onmouseout（ Removed from the ）

onmouseover Event occurs when the mouse pointer moves over the specified element .

onmouseout Event occurs when the mouse pointer moves out of the specified object .

<!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 Limit mouse range </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 Code

utilize mouseenter（ move ）、mouseleave（ Removed from the ）

<!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 Limit mouse range </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" }); // Show the mouse 
  });
  $(".child").mouseleave(function () {
    $(".box").css({ "cursor": "none" }); // Hide the mouse 
  });

</script>

</html>

onmouseover event | Novice tutorial

Expand thinking ：

1. You can even move in and out Disable mouse function .

Reference resources : Methods to disable mouse events

2. Or yes Be similar to Move the mouse over the border to stop it Moved . You can refer to the following drag and drop , I think so div Blocks can be dragged to the edge without dragging , that Move the mouse to the edge and don't let it Moved , It should be possible （ I never tried. ）.

<!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 Limit drag range </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')

    //  Mouse down action 
    box.onmousedown = down
    //  The movement of the mouse 
    document.onmousemove = move
    //  Release the mouse 
    document.onmouseup = up

    //  Function after mouse down ,e For the object of the event 
    function down(e) {
      dragging = true

      //  Get the coordinates of the element 
      boxX = box.offsetLeft
      boxY = box.offsetTop

      //  Get the coordinates of the mouse 
      mouseX = parseInt(getMouseXY(e).x)
      mouseY = parseInt(getMouseXY(e).y)

      //  The coordinates of the mouse relative to the left and upper edges of the element 
      offsetX = mouseX - boxX
      offsetY = mouseY - boxY
    }

    //  Function called by mouse movement 
    function move(e) {
      if (dragging) {
        //  Get the coordinates of the moved element 
        var x = getMouseXY(e).x - offsetX
        var y = getMouseXY(e).y - offsetY

        //  Calculate the size of the movable position ,  Ensure that the element does not exceed the movable range 
        //  Here is the width of the parent element minus the width of the child element 
        var width = box1.clientWidth - box.offsetWidth
        var height = box1.clientHeight - box.offsetHeight

        // min Method ensures that the right boundary is not exceeded ,max Make sure you don't exceed the left boundary 
        x = Math.min(Math.max(0, x), width)
        y = Math.min(Math.max(0, y), height)

        //  Position elements in time 
        box.style.left = x + 'px'
        box.style.top = y + 'px'
      }
    }

    //  Function to release the mouse 
    function up(e) {
      dragging = false
    }

    //  Function to get the position of the mouse 
    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
      }
    }
  })()
//  This code   Reference and ：https://www.jb51.net/article/198259.htm
</script>

</html>

This code refers to ：js Drag and drop limits

原网站

版权声明
本文为[Xiaozai's Valley rain]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/176/202206251841180615.html