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>

特別注意：

因為圖片、文字選中是也會被拖拽, 這是一種默認行為, 所以在鼠標按下時, 我們需要清除這種默認行為。

)CSS 標準盒子模型(Box Model)

在網頁中所有HTML元素可以看作盒子,在CSS中,"box model"術語是用來設計和布局時使用的;CSS盒模型本質上是一個盒子,封裝周圍的HTML元素包括:外邊距(margin)邊框(border)內邊距(padding)實際內容(content)四個屬性,所以布局時每個元素所占的總寬高是這4個屬性的總和;比如寬度:總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距

1.1Margin(外邊距)清除邊框外的區域,外邊距是透明的

1.2Border(邊框)圍繞在內邊距和內容外的邊框

1.3Padding(內邊距)清除內容周圍的區域,內邊距是透明的

1.4Content(內容)盒子里填充的內容比如文本,圖像等

標準盒子模型

寬度為100px的div

根據盒子模型得出該元素的總寬度為:100+(20+20)+(15+15)+(15+15)(由里至外)因此如果想在此div中放置一個寬度為100px的元素,此元素的總寬度必須小于等于100px

2)DIV+CSS布局

Div+CSS布局就是將網頁內容用<div>分割為塊,之后使用css設置每個塊的大小,位置等

DIV+CSS布局最重要的是靈活運用float(浮動)屬性,其值:1)left 2)right 3)both

clear屬性作用是清除浮動,其值為:1)left 2)right 3)both

d2向右浮動 float:right

因為div是塊級元素,如果都沒有脫離文檔流div就會按照從上到下的順序放置

d2設置為右浮動其他兩個div位置的變化:

1)d1沒有脫離文檔流會占據一行,所以d2只能浮動到d1下面的右面如上圖所示

2)d2脫離文檔流,d3自動填充到d2的位置

d1,d2全部設置為右浮動

1)當d1,d2都設置為右浮動時:因為css中d1在d2上面先設置,因此d1在右側,如果d2在d1上面先設置樣式,則d2在右側,d1在左側,自己測試不再截圖

2)當d1,d2都設置為右浮動時:d3就會跑到上圖中d2的位置

3)如果3個div都設置左或右浮動,當3個width加一起<=100%就會在第一行顯示(d1,d2,d3)

 <style type="text/css">
      #d1 {
      margin: 0px;
      background-color: red;
      padding: 0px;
      width: 50%;
      height: 100px;
      float:right; 
    }
    #d2 {
      margin: 0px;
      background-color: yellow;
      padding: 0px;
      width: 50%;
      height: 100px;
      float:right; 
    }
    #d3 {
      margin: 0px;
      background-color: green;
      padding: 0px;
      width: 50%;
      height: 100px;
    }
  </style>

d2清除左浮動,d3設置為右浮動

當d2清除了左浮動,d3設置為右浮動,就會如上圖所示;如果d2清除的是右浮動,d2就會在d1上面,d3就會定位在d1下面的右面,自己測試不再截圖

當d2清除了左浮動,如果想要d2緊挨著d1(與d1在一行上),可以通過position脫離文檔流設置其上下左右屬性使其定位在d1右側,自己測試

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>div+CSS布局</title>
  <style type="text/css">
      #d1 {
      margin: 0px;
      background-color: red;
      padding: 0px;
      width: 30%;
      height: 100px;
      float:left; 
    }
    #d2 {
      margin: 0px;
      background-color: yellow;
      padding: 0px;
      width: 40%;
      height: 100px;
      clear: left;     
    }
    #d3 {
      margin: 0px;
      background-color: green;
      padding: 0px;
      width: 30%;
      height: 100px; 
      float: right; 
    }
  </style>
</head>
<body>
    <div id="d1"><span style="font-size: 50px;">d1</span></div>
    <div id="d2"><span style="font-size: 50px;">d2</span></div>
    <div id="d3"><span style="font-size: 50px;">d3</span></div>
  </body>
</html>

DIV+CSS布局綜合運用position+上下左右屬性與float屬性為網頁進行布局

注意:瀏覽器的兼容性問題,特別是使用IE內核的瀏覽器對W3C的規范不怎么遵守

個網頁前端是由HTML DOM與嵌套組合形成視圖結加上 CSS 樣式的修飾形成視圖，由JavaScript 接受用戶的交互請求，以事件機制來響應用戶交互操作而形成的。CSS是前臺頁面形式最重要的部分，它負責控制DOM元素的頁面布局和顏色、大小的屬性。

在CSS中有一著名的盒子模型理論，可以用它來控制DOM的位置。基于div+css技術的“盒子模型”的出現大大代替了傳統的table表格嵌套。

雖然其十分好用，但是對于很多新手來說，卻很難搞清楚它幾個屬性和內容之間的聯系個區別。

盒子模型概念

所有頁面的元素都可以看做一個盒子，占據著一定的頁面空間。一般來說這些被占據的空間往往會比單純的內容要大。因此，可以通過盒子的邊框和距離等參數來控制內容的位置。

Div+CSS 盒子模型

說明：

1、Margin：中文叫外邊距，主要作用是控制邊框外（Border以外）的區域，外邊距是透明的。

2、Border：中文叫邊框，是圍繞在內邊距（Padding）和內容外的邊框。注意，它不是透明的。

3、Padding：中文叫內邊距，控制內容周圍的區域，內邊距是透明的。

4、Content：內容，盒子的內容，顯示文本和圖像。

5、在Css文件中設置的Div的Css.width和Css. height就是內容的寬和高。

6、盒子實際尺寸有可能大于內容尺寸：

盒子模型的總寬度等于content（寬）+padding（左右）+border（左右）+margin（左右）;

盒子模型的總高度等于content（高）+padding（上下）+border（上下）+margin（上下）;

實例演示--原始樣式

接下來通過實例演示的方式來一一講解Margin、Border、Padding的作用和區別。

頁面如圖所示：

原始樣式

代碼：

HTML:
<body>
    <div class="TsetUpper"></div>
    <div class="TsetMiddle"></div>
    <div class="TsetDown"></div>
</body>
CSS:
.TsetUpper{
	width: 400px;
	height: 200px;
	background-color: black;
	position: relative;
	margin: auto;
	text-align: center;
}
.TsetMiddle{
	width: 600px;
	height: 200px;
	background-color: red;
	position: relative;
	margin: auto;
}
.TsetDown{
	width: 400px;
	height: 200px;
	background-color: black;
	position: relative;
	margin: auto;
	text-align: center;
}

Border

元素邊框：我們可以在CSS邊框屬性中設置元素邊框的樣式和顏色。

按如下代碼設置Div(TsetMiddle)的Border（邊框）：

border-style:solid;
border-width: 10px;
border-color: aqua;

刷新頁面如下圖：此時TsetMiddle這個盒子的總寬度已經變成200+30+30了，而且可以設置其底色和線條樣式。

Border

Margin

margin 控制周圍的元素區域。margin 沒有背景顏色，是完全透明的。通過margin可以控制元素與四周元素的空隙距離；

按如下代碼設置Div(TsetMiddle)的margin（外邊距）：

margin: 30px auto;

刷新頁面如下圖：此時TsetMiddle這個盒子的總寬度已經變成200+30（Border）+30（Margin）+30（Border）+30（Margin）了。

Margin

Padding

Padding：當元素的 padding（填充）內邊距被清除時，所釋放的區域將會受到元素背景顏色的填充。

按如下代碼設置Div(TsetMiddle)的margin（外邊距）：

padding: 30px;

刷新頁面如下圖：此時TsetMiddle這個盒子的總寬度已經變成200+30（Padding）+30（Border）+30（Margin）+30（Padding）+30（Border）+30（Margin）了。

Padding

總結

1、各屬性的值可以用px為單位，也可以用em，百分比等。

2、可以利用盒子的各種屬性，調整其內容在父容器中的位置。

在線咨詢

上一篇：Web前端開發之HTML基礎
下一篇：英語干貨：這500個重要短語，高中英語各題型都在考，

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript 鼠標坐標和盒子位置

盒子模型概念

實例演示--原始樣式

Border

Margin

Padding

總結

您的項目需求