前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

2024年11月20日

JavaScript 鼠标坐标和盒子位置

鼠标位置

当我们给某一个盒子添加鼠标事件监听时(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

图解: https://www.cnblogs.com/Abner5/p/5855274.html?utm_source=itdadao&utm_medium=referral

event.getBoundingClientRect()

图解: https://www.cnblogs.com/Songyc/p/4458570.html

实例: 鼠标点击特效

<!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];

//我们在懒加载的时候就用到过净位置
//http://jquery.cuishifeng.cn/offset.html

//净位置就是盒子到body的位置
//console.log(span.offsetTop)
console.log(span.offsetParent);//定位复原素(div)

//他返回一个信息集合
console.log(span.getBoundingClientRect());//这个东西就可以得到span的所有位置关系

//top和left值就是我们所需要的净位置
//我们知道我们无法直接获取该盒子到body的位置 但是我们我们可以获取该合资距离他有定位祖先元素的位置 那么这样我们就可以一层一层网上找
/*body
div(定位)
span

span.offsetTop ->sapn.offsetParent
div.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)); //100

function 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>

特别注意：

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

标签：div定位 

作者:whsf66 , 分类:前端教程 , 浏览:8 , 评论:0

发表评论:

控制面板
您好，欢迎到访网站！
  查看权限
网站分类
最新留言