JavaScript 鼠标坐标和盒子位置

寒笛过霜天 05-09 59

前言：

目前咱们对“js设置位置”大约比较着重，朋友们都想要学习一些“js设置位置”的相关知识。那么小编同时在网上搜集了一些对于“js设置位置””的相关文章，希望朋友们能喜欢，兄弟们一起来了解一下吧！

鼠标位置

当我们给某一个盒子添加鼠标事件监听时(click、mouseover、mouseenter、mouseout等事件), 都一定会有以下四组值：

event.pageX event.pageY

event.screenX event.screenY

event.clientX event.clientY

event.offsetX event.offsetY

event.pageY 表示鼠标指针, 到页面顶端的距离。IE6、7、8不兼容

event.screenY 表示鼠标指针, 到屏幕顶端的距离

event.clientY 表示鼠标指针, 到视口顶端的距离(视口就是当前可视窗口)

event.offsetY 表示鼠标指针, 到盒子顶端的距离

规律：

1、当页面没有卷动的时候, pageY一定等价于clientY。或换句话说pageY等价于clientY+页面卷动的值scrollTop。

2、IE678不兼容pageX、pageY

offsetX/Y指的不是距离你监听的那个盒子左上角的距离, 而是指的你现在鼠标指针所在位置到此时最内层盒子左上角的距离。

getBoundingClientRect 用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。

event.getBoundingClientRect().left;

具体区别:

event.pageX event.pageY

event.screenX event.screenY

event.clientX event.clientY

event.offsetX event.offsetY

图解:

event.getBoundingClientRect()

图解:

实例: 鼠标点击特效

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;/*cursor: none;*/}img{width: 100px;position: absolute;left: 0;top: 0;}</style></head><body><script type="text/javascript">var body = document.getElementsByTagName("body")[0];//如果想点击body那么body必须设置宽高document.onclick = function(e){var ev = e || window.event;//事件对象的兼容var left = ev.clientX;var top = ev.clientY;var img = document.createElement("img");img.setAttribute("src","img/eagle.png");img.style.left = left + "px";img.style.top = top + "px";body.appendChild(img);//因为拖拽图片图片有一种神奇的魔力 也就是我们所有的默认行为if(ev.preventDefault){ev.preventDefault();}else{ev.returnValue = false;}}</script></body></html>

盒子位置

任何一个元素都有offsetParent属性和offsetLeft、offsetTop属性

对象.offsetParent获得定位祖先元素, 一层一层往上找, 如果不存在就是body和绝对定位类似

对象.offsetLeft获取到定位父元素距离左边的值, 一层一层往上找, 如果不存在就是body

对象.offsetTop获取到定位父元素距离上边的值, 一层一层往上找, 如果不存在就是body

offsetWidth 盒子的宽度

offsetHeight 盒子的高度

document.documentElement.clientWidth 文档的宽度

document.documentElement.clientHeight 文档的高度

//可视区域宽高

//console.log(document.body.clientWidth);//个别浏览器

//console.log(document.documentElement.clientWidth);//高版本

var w = document.documentElement.clientWidth || document.body.clientWidth;

var h = document.documentElement.clientHeight || document.body.clientHeight;

实例1：获取行内样式的宽度和高度

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}div{width: 600px;height: 300px;background-color: red;}</style></head><body><div></div><script type="text/javascript">var div = document.getElementsByTagName("div")[0];console.log(div.style.width);//操作的都是行内//不兼容//高版本console.log(window.getComputedStyle(div).width)//低版本console.log(div.currentStyle.width)</script></body></html>实例2: 获取盒子的宽度和高度<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}div{width: 600px;height: 300px;background-color: red;}</style></head><body><div></div><script type="text/javascript">var div = document.getElementsByTagName("div")[0];//盒子宽高 number类型console.log(div.offsetWidth)console.log(div.offsetHeight)</script></body></html>

实例3: 获取盒子的位置

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}div{width: 600px;height: 300px;background-color: red;margin: 50px;padding: 50px;position: relative;}span{width: 100px;height: 100px;display: block;background-color: orange;}</style></head><body><div><span></span></div><script type="text/javascript">var div = document.getElementsByTagName("div")[0];var span = document.getElementsByTagName("span")[0];//盒子距离定位父元素(div)的位置console.log(span.offsetLeft)console.log(span.offsetTop)</script></body></html>

实例4: 获取盒子的净位置

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}div{width: 600px;height: 300px;background-color: red;margin: 50px;padding: 50px;position: relative;}span{width: 500px;height: 88px;display: block;background-color: orange;}</style></head><body><div><span></span></div><script type="text/javascript">var div = document.getElementsByTagName("div")[0];var span = document.getElementsByTagName("span")[0];//我们在懒加载的时候就用到过净位置//净位置就是盒子到body的位置//console.log(span.offsetTop)console.log(span.offsetParent);//定位复原素(div)//他返回一个信息集合console.log(span.getBoundingClientRect());//这个东西就可以得到span的所有位置关系//top和left值就是我们所需要的净位置//我们知道我们无法直接获取该盒子到body的位置 但是我们我们可以获取该合资距离他有定位祖先元素的位置 那么这样我们就可以一层一层网上找/*bodydiv(定位)spanspan.offsetTop ->sapn.offsetParentdiv.offsetTop*/</script></body></html>

实例5 编写净位置函数

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}div{width: 600px;height: 300px;background-color: red;margin: 50px;padding: 50px;/*position: relative;*/}span{width: 500px;height: 88px;display: block;background-color: orange;}</style></head><body><div><span></span></div><script type="text/javascript">var div = document.getElementsByTagName("div")[0];var span = document.getElementsByTagName("span")[0];//方法一: 编写自定义函数console.log(pos(span)); //100function pos(obj){//用一个变量存储盒子到页面的初始值var left = obj.offsetLeft;//因为定位父盒子不确定 所以用一个变量临时存储 后面替换var par = obj.offsetParent;while(par){left += par.offsetLeft;par = par.offsetParent;}return left;}//方法二: getBoundingClientRect里面包含了到页面的left top值console.log(span.getBoundingClientRect().left) //100</script></body></html>

拖拽三大事件

鼠标按下onmousedown

鼠标移动onmousemove

鼠标抬起onmouseup

实例: 鼠标拖拽

<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}div{width: 200px;height: 200px;cursor: move;background-color: orange;/*元素如果可以拖拽他必定是定位元素*/position: absolute;left: 0;top: 0;}</style></head><body><div>今天我们学习了拖拽 感觉老是讲的就是一坨翔</div><p>onmouseup</p><script type="text/javascript">//拖拽三大事件//鼠标按下onmousedown//鼠标移动onmousemove//鼠标抬起onmouseup//获取元素var div = document.getElementsByTagName("div")[0];div.onmousedown = function(e){var ev = e || window.event;//我按下时把鼠标到盒子的位置求出来var startX = ev.offsetX;var startY = ev.offsetY;//div.onmousemove = function(e){//因为我们向左上角移动那么盒子就不跟着我跑了document.onmousemove = function(e){var ev = e || window.event;//你移动鼠标那么盒子跟着你跑console.log(ev.clientX,ev.offsetX)console.log(ev.clientX - ev.offsetX)console.log(ev.clientY - ev.offsetY)//鼠标移动的位置就是鼠标到可视区的位置-一开始鼠标按下的位置div.style.left = ev.clientX - startX + "px";div.style.top = ev.clientY - startY + "px";//div.style.left = ev.clientX + "px";//div.style.top = ev.clientY + "px";}//我们习惯把抬起也放入按下里面document.onmouseup = function(){document.onmousemove = null;//我抬起鼠标之后不想让他再跟着我跑了//所以就直接解除绑定document.onmouseup = null;}//如果拖拽图片或者文字那么此时拖拽失效 所以我们需要清除默认行为/*if(ev.preventDefault){ev.preventDefault()}else{ev.returnValue = false;}*/return false;//如果使用它必须放到最后}//基本上很完美了</script></body></html>实例: 鼠标拖拽--防止拖出页面<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}div{width: 200px;height: 200px;cursor: move;background-color: orange;/*元素如果可以拖拽他必定是定位元素*/position: absolute;left: 0;top: 0;}</style></head><body><div>今天我们学习了拖拽 感觉老是讲的就是一坨翔</div><p>onmouseup</p><script type="text/javascript">//拖拽三大事件//鼠标按下onmousedown//鼠标移动onmousemove//鼠标抬起onmouseup//获取元素var div = document.getElementsByTagName("div")[0];div.onmousedown = function(e){var ev = e || window.event;//我按下时把鼠标到盒子(div)的位置求出来var startX = ev.offsetX;var startY = ev.offsetY;//div.onmousemove = function(e){//因为我们向左上角移动那么盒子就不跟着我跑了document.onmousemove = function(e){var ev = e || window.event;//你移动鼠标那么盒子跟着你跑console.log(ev.clientX,ev.offsetX)console.log(ev.clientX - ev.offsetX)console.log(ev.clientY - ev.offsetY)var lDis = ev.clientX - startX;var rDis = ev.clientY - startY;if(rDis < 0){rDis = 0;}if(lDis < 0){lDis = 0;}if(lDis > document.documentElement.clientWidth-div.offsetWidth){lDis = document.documentElement.clientWidth-div.offsetWidth;}if(rDis > document.documentElement.clientHeight-div.offsetHeight){rDis = document.documentElement.clientHeight-div.offsetHeight;}//鼠标移动的位置就是鼠标到可视区的位置-一开始鼠标按下的位置div.style.left = lDis + "px";div.style.top = rDis + "px";//div.style.left = ev.clientX + "px";//div.style.top = ev.clientY + "px";}//我们习惯把抬起也放入按下里面document.onmouseup = function(){document.onmousemove = null;//我抬起鼠标之后不想让他再跟着我跑了//所以就直接解除绑定document.onmouseup = null;}//如果拖拽图片或者文字那么此时拖拽失效 所以我们需要清除默认行为/*if(ev.preventDefault){ev.preventDefault()}else{ev.returnValue = false;}*/return false;//如果使用它必须放到最后}//基本上很完美了</script></body></html>

特别注意：

因为图片、文字选中是也会被拖拽, 这是一种默认行为, 所以在鼠标按下时, 我们需要清除这种默认行为。

本文地址：http://www.longkongtuishu.com/ca1efDWsKAlUHDQ.html

标签： #js设置位置