js 限制鼠标移动范围

问题描述：

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

实现步骤：

限制范围的思路：可以超出范围就提示，或者隐藏鼠标光标。借助 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 = falsevar boxX, boxY, mouseX, mouseY, offsetX, offsetYvar 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.offsetLeftboxY = box.offsetTop// 获取鼠标所在的坐标mouseX = parseInt(getMouseXY(e).x)mouseY = parseInt(getMouseXY(e).y)// 鼠标相对元素左和上边缘的坐标offsetX = mouseX - boxXoffsetY = mouseY - boxY}// 鼠标移动调用的函数function move(e) {if (dragging) {// 获取移动后的元素的坐标var x = getMouseXY(e).x - offsetXvar y = getMouseXY(e).y - offsetY// 计算可移动位置的大小， 保证元素不会超过可移动范围// 此处就是父元素的宽度减去子元素宽度var width = box1.clientWidth - box.offsetWidthvar 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 = 0e = e || window.eventif (e.pageX) {x = e.pageXy = e.pageY} else {x = e.clientX + document.body.scrollLeft - document.body.clientLefty = e.clientY + document.body.scrollTop - document.body.clientTop}return {x: x,y: y}}})()
// 本代码 参考与：https://www.jb51.net/article/198259.htm
</script></html>

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

js 限制鼠标移动范围相关推荐

JS获取鼠标位置，兼容IE FF
JS获取鼠标位置,兼容IE FF 由于Firefox和IE等浏览器之间对js解释的方式不一样,firefox下面获取鼠标位置不能够直接使用clientX来获取.网上说的一般都是触发mousemove事 ...
html怎么鼠标经过添加蒙版遮罩,js实现鼠标移动到图片产生遮罩效果
本文实例为大家分享了js实现鼠标移动到图片产生遮罩效果的具体代码,供大家参考,具体内容如下 mask .pic{ width:300px; height:250px; background:url(i ...
C语言跟随鼠标画方框,JS拖动鼠标画出方框实现鼠标选区的方法
本文实例讲述了JS拖动鼠标画出方框实现鼠标选区的方法.分享给大家供大家参考.具体如下: 相当实用的一个JS技巧,拖动鼠标可画出一个方框,可作为一个选区的功能,可以用来画流程图,设计草图什么的,也可以作 ...
html判断坐标,js判断鼠标位置是否在某个div中的方法
本文实例讲述了js判断鼠标位置是否在某个div中的方法.分享给大家供大家参考,具体如下: div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判 ...
js禁止鼠标滑轮_js实现鼠标滑动到某个div禁止滚动
本文实例为大家分享了js实现鼠标滑动到某个div禁止滚动的具体代码,供大家参考,具体内容如下项目中碰到一个场景就是当鼠标滑倒某个div的时候,滑动鼠标页面不再滚动. 这里主要是当鼠标滑动到该div时 ...
JS实现鼠标点击展开/隐藏表格行
<title>JS实现鼠标点击展开/隐藏表格行_网页代码站(www.webdm.cn)</title> <script language="javascript ...
html点击控制盒子左右移动,JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例...
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例发布时间:2020-10-04 12:47:25 来源:脚本之家阅读:121 作者:s_psycho 本文实例讲述了JS实现鼠标拖拽盒子移动及右键 ...
js获取鼠标所在html元素的id和属性
js获取鼠标所在html元素的id和属性: Code: <div onclick="Get_srcElement()"> <div id="001&qu ...
java 中鼠标事件_[Java教程]js中鼠标事件总结
[Java教程]js中鼠标事件总结 0 2017-07-11 00:00:19 js中鼠标事件主要有onclick,onmousedown,onmouseup,oncontextmenu,ondblc ...
html鼠标拖尾效果,JS实现鼠标移动拖尾
本文实例为大家分享了JS实现鼠标移动拖尾的具体代码,供大家参考,具体内容如下 JS 代码 function getMousePos(event) { var e = event || window.e ...