js 限制鼠标移动范围
生活随笔
收集整理的這篇文章主要介紹了
js 限制鼠标移动范围
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
問(wèn)題描述：
?想要實(shí)現(xiàn)鼠標(biāo)限制范圍，那么就需要 監(jiān)聽(tīng)鼠標(biāo) 移入移出 事件 。并且 移出時(shí)做個(gè)提示。在里面禁用 鼠標(biāo)事件。
實(shí)現(xiàn)步驟：?
限制范圍 的思路 ：可以 超出范圍 就提示，或者隱藏 鼠標(biāo)光標(biāo)。借助?onmouseove、onmouseout事件然后 動(dòng)態(tài)設(shè)置?限制的 dom的?cursor屬性。?cursor：none 隱藏 ,cursor:auto顯示。
js代碼
?js利用?onmouseover（移入）、onmouseout（移出）
onmouseover 事件會(huì)在鼠標(biāo)指針移動(dòng)到指定的元素上時(shí)發(fā)生。
onmouseout 事件會(huì)在鼠標(biāo)指針移出指定的對(duì)象時(shí)發(fā)生。
cursor屬性定義及使用說(shuō)明:
span.crosshair {cursor:crosshair} span.help {cursor:help} span.wait {cursor:wait}屬性值:
| url | 需使用的自定義光標(biāo)的 URL。 注釋：請(qǐng)?jiān)诖肆斜淼哪┒耸冀K定義一種普通的光標(biāo)，以防沒(méi)有由 URL 定義的可用光標(biāo)。 |
| default | 默認(rèn)光標(biāo)（通常是一個(gè)箭頭） |
| auto | 默認(rèn)。瀏覽器設(shè)置的光標(biāo)。 |
| crosshair | 光標(biāo)呈現(xiàn)為十字線。 |
| pointer | 光標(biāo)呈現(xiàn)為指示鏈接的指針（一只手） |
| move | 此光標(biāo)指示某對(duì)象可被移動(dòng)。 |
| e-resize | 此光標(biāo)指示矩形框的邊緣可被向右（東）移動(dòng)。 |
| ne-resize | 此光標(biāo)指示矩形框的邊緣可被向上及向右移動(dòng)（北/東）。 |
| nw-resize | 此光標(biāo)指示矩形框的邊緣可被向上及向左移動(dòng)（北/西）。 |
| n-resize | 此光標(biāo)指示矩形框的邊緣可被向上（北）移動(dòng)。 |
| se-resize | 此光標(biāo)指示矩形框的邊緣可被向下及向右移動(dòng)（南/東）。 |
| sw-resize | 此光標(biāo)指示矩形框的邊緣可被向下及向左移動(dòng)（南/西）。 |
| s-resize | 此光標(biāo)指示矩形框的邊緣可被向下移動(dòng)（南）。 |
| w-resize | 此光標(biāo)指示矩形框的邊緣可被向左移動(dòng)（西）。 |
| text | 此光標(biāo)指示文本。 |
| wait | 此光標(biāo)指示程序正忙（通常是一只表或沙漏）。 |
| help | 此光標(biāo)指示可用的幫助（通常是一個(gè)問(wèn)號(hào)或一個(gè)氣球）。 |
?參考于：CSS cursor 屬性 | 菜鳥(niǎo)教程
<!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限制鼠標(biāo)范圍</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限制鼠標(biāo)范圍</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" }); //顯示鼠標(biāo)});$(".child").mouseleave(function () {$(".box").css({ "cursor": "none" }); //隱藏鼠標(biāo)});</script></html>onmouseover 事件 | 菜鳥(niǎo)教程
?拓展思維：
1.甚至可以移入移出 禁用鼠標(biāo)功能 。
參考:?禁用鼠標(biāo)事件的方法
2.再或者 是 類似于 鼠標(biāo)移到邊界就不讓其 移動(dòng)了。可以參考下面的拖拽，我覺(jué)得盡然 div塊都可以拖拽到邊緣就不讓拖拽了，那 鼠標(biāo)移到到邊緣不讓其 移動(dòng)了，應(yīng)該也是可行的（我沒(méi)試過(guò)）。
<!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')// 鼠標(biāo)按下的動(dòng)作box.onmousedown = down// 鼠標(biāo)的移動(dòng)動(dòng)作document.onmousemove = move// 釋放鼠標(biāo)的動(dòng)作document.onmouseup = up// 鼠標(biāo)按下后的函數(shù),e為事件對(duì)象function down(e) {dragging = true// 獲取元素所在的坐標(biāo)boxX = box.offsetLeftboxY = box.offsetTop// 獲取鼠標(biāo)所在的坐標(biāo)mouseX = parseInt(getMouseXY(e).x)mouseY = parseInt(getMouseXY(e).y)// 鼠標(biāo)相對(duì)元素左和上邊緣的坐標(biāo)offsetX = mouseX - boxXoffsetY = mouseY - boxY}// 鼠標(biāo)移動(dòng)調(diào)用的函數(shù)function move(e) {if (dragging) {// 獲取移動(dòng)后的元素的坐標(biāo)var x = getMouseXY(e).x - offsetXvar y = getMouseXY(e).y - offsetY// 計(jì)算可移動(dòng)位置的大小， 保證元素不會(huì)超過(guò)可移動(dòng)范圍// 此處就是父元素的寬度減去子元素寬度var width = box1.clientWidth - box.offsetWidthvar height = box1.clientHeight - box.offsetHeight// min方法保證不會(huì)超過(guò)右邊界，max保證不會(huì)超過(guò)左邊界x = Math.min(Math.max(0, x), width)y = Math.min(Math.max(0, y), height)// 給元素及時(shí)定位box.style.left = x + 'px'box.style.top = y + 'px'}}// 釋放鼠標(biāo)的函數(shù)function up(e) {dragging = false}// 函數(shù)用于獲取鼠標(biāo)的位置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 拖拽限制范圍
總結(jié)
以上是生活随笔為你收集整理的js 限制鼠标移动范围的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 手机卡从2G升级到4G，那GSM、WCD
- 下一篇： 云栖干货回顾 | 行业顶级NoSQL成员