js 限制鼠标移动范围
生活随笔
收集整理的這篇文章主要介紹了
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 限制鼠标移动范围的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 手机卡从2G升级到4G，那GSM、WCD
- 下一篇： 常见地图服务(WMS、WFS、WCS、T