日韩毛片在线,亚洲AV无码国产综合专区,亚洲热热热,青娱乐99999在线中文字幕,久久久久福利视频,婷婷丁香网站,国产麻豆剧传媒精品国产,欧美淫秽在线视频

↓ 推薦關(guān)注↓

作者：?去偽存真

https://juejin.cn/post/7225206098692407355

背景

最近在項(xiàng)目中要實(shí)現(xiàn)一個(gè)拖拽頭像的移動(dòng)效果，一直對(duì)JS Dom拖拽這一塊不太熟悉，甚至在網(wǎng)上找一個(gè)示例，都看得云里霧里的，發(fā)現(xiàn)遇到最大的攔路虎就是JS Dom各種各樣的距離，讓人頭暈眼花，看到一個(gè)距離屬性，大腦中的印象極其模糊，如同有一團(tuán)霧一樣，不知其確切含義。果然是基礎(chǔ)不牢，地動(dòng)山搖。今天決心夯實(shí)一下基礎(chǔ)，親自動(dòng)手驗(yàn)證一遍dom各種距離的含義。

JS Dom各種距離釋義

下面我們進(jìn)入正題, 筆者不善于畫圖, 主要是借助瀏覽器開發(fā)者工具，通過獲取的數(shù)值給大家說明一下各種距離的區(qū)別。

第一個(gè)發(fā)現(xiàn) window.devicePixelRatio 的存在

本打算用截圖軟件丈量尺寸，結(jié)果發(fā)現(xiàn)截圖軟件顯示的屏幕寬度與瀏覽器開發(fā)者工具獲取的寬度不一致，這是為什么呢?

截圖軟件顯示的屏幕寬度是1920

window.screen.width顯示的屏幕寬度是1536

這是怎么回事？原來在PC端，也存在一個(gè)設(shè)備像素比的概念。它告訴瀏覽器一個(gè)css像素應(yīng)該使用多少個(gè)物理像素來繪制。要說設(shè)備像素比，得先說一下像素和分辨率這兩個(gè)概念。

像素屏幕中最小的色塊，每個(gè)色塊稱之為一個(gè)像素（Pixel）

分辨率 分辨率=屏幕水平方向的像素點(diǎn)數(shù) * 屏幕垂直方向的像素點(diǎn)數(shù); 另外說一下,關(guān)于分辨率有多種定義,可以細(xì)分為顯示分辨率、圖像分辨率、打印分辨率和掃描分辨率等，此處是指顯示分辨率。

設(shè)備像素比

設(shè)備像素比的定義是：

window.devicePixelRatio =顯示設(shè)備物理像素分辨率顯示設(shè)備CSS像素分辨率\frac{顯示設(shè)備物理像素分辨率}{顯示設(shè)備CSS像素分辨率}顯示設(shè)備CSS像素分辨率顯示設(shè)備物理像素分辨率

根據(jù)設(shè)備像素比的定義, 如果知道顯示設(shè)備橫向的css像素值，根據(jù)上面的公式，就能計(jì)算出顯示設(shè)備橫向的物理像素值。

      
      顯示設(shè)備寬度物理像素值=?window.screen.width?*?window.devicePixelRatio;

設(shè)備像素比在我的筆記本電腦上顯示的數(shù)值是1.25, 代表一個(gè)css邏輯像素對(duì)應(yīng)著1.25個(gè)物理像素。

我前面的公式計(jì)算了一下，與截圖軟件顯示的像素?cái)?shù)值一致。這也反過來說明，截圖軟件顯示的是物理像素值。

window.devicePixelRatio 是由什么決定的 ?

發(fā)現(xiàn)是由筆記本電腦屏幕的縮放設(shè)置決定的，如果設(shè)置成100%, 此時(shí)window.screen.width與筆記本電腦的顯示器分辨率X軸方向的數(shù)值一致,都是1920(如右側(cè)圖所示), 此時(shí)屏幕上的字會(huì)變得比較小,比較傷視力。

邏輯像素是為了解決什么問題?

邏輯像素是為了解決屏幕相同，分辨率不同的兩臺(tái)顯示設(shè)備，顯示同一張圖片大小明顯不一致的問題。比如說兩臺(tái)筆記本都是15英寸的，一個(gè)分辨率是1920*1080,一個(gè)分辨率是960*540, 在1920*1080分辨率的設(shè)備上，每個(gè)格子比較小，在960*540分辨率的設(shè)備上，每個(gè)格子比較大。一張200*200的圖片，在高分率的設(shè)備上看起來會(huì)比較小，在低分辨率的設(shè)備上，看起來會(huì)比較大。觀感不好。為了使同樣尺寸的圖片，在兩臺(tái)屏幕尺寸一樣大的設(shè)備上，顯示尺寸看起來差不多一樣大，發(fā)明了邏輯像素這個(gè)概念。規(guī)定所有電子設(shè)備呈現(xiàn)的圖片等資源尺寸統(tǒng)一用邏輯像素表示。然后在高分辨率設(shè)備上，提高devicePixelRatio, 比如說設(shè)置1920*1080設(shè)備的devicePixelRatio(dpr)等于2, 一個(gè)邏輯像素占用兩個(gè)格子,在低分辨率設(shè)備上，比如說在960*540設(shè)備上設(shè)置dpr=1, 一個(gè)css邏輯像素占一個(gè)格子, 這樣兩張圖片在同樣的設(shè)備上尺寸大小就差不多了。通常設(shè)備上的邏輯像素是等于物理像素的，在高分辨率設(shè)備上，物理像素是大于邏輯像素?cái)?shù)量的。由此也可以看出，物理像素一出廠就是固定的，而設(shè)備的邏輯像素會(huì)隨著設(shè)備像素比設(shè)置的值不同而改變。但圖片的邏輯像素值是不變的。

document.body、document.documentElement和window.screen的寬高區(qū)別

差別是很容易辨別的，如下圖所示：

document.body -- body標(biāo)簽的寬高
document.documentElement -- 網(wǎng)頁(yè)可視區(qū)域的寬高(不包括滾動(dòng)條)
window.screen -- 屏幕的寬高

網(wǎng)頁(yè)可視區(qū)域不包括滾動(dòng)條

如下圖所示，截圖時(shí)在未把網(wǎng)頁(yè)可視區(qū)域的滾動(dòng)條高度計(jì)算在內(nèi)的條件下, 截圖工具顯示的網(wǎng)頁(yè)可視區(qū)域高度是168, 瀏覽器顯示的網(wǎng)頁(yè)可視區(qū)域的高度是167.5, 誤差0.5，由于截圖工具是手動(dòng)截圖，肯定有誤差，結(jié)果表明，網(wǎng)頁(yè)可視區(qū)域的高度 不包括滾動(dòng)條高度。寬度同理。

屏幕和網(wǎng)頁(yè)可視區(qū)域的寬高區(qū)別如下：

屏幕寬高是個(gè)固定值，網(wǎng)頁(yè)可視區(qū)域?qū)捀邥?huì)受到縮放窗口影響。

屏幕高度和屏幕可用高度區(qū)別如下：

屏幕可用高度=屏幕高度-屏幕下方任務(wù)欄的高度，也就是：

      
      window.screen.availHeight = window.screen.height - 系統(tǒng)任務(wù)欄高度

scrollWidth, scrollLeft, clientWidth關(guān)系

      
      scrollWidth(滾動(dòng)寬度,包含滾動(dòng)條的寬度)=scrollLeft(左邊卷去的距離)+clientWidth(可見部分寬度);
// 同理
scrollHeight(滾動(dòng)高度,包含滾動(dòng)條的高度)=scrollTop(上邊卷去的距離)+clientHeight(可見部分高度);

需要注意的是，上面這三個(gè)屬性，都取的是溢出元素的父級(jí)元素屬性。而不是溢出元素本身。本例中溢出元素是body(document.body),其父級(jí)元素是html(document.documentElement)。另外，

      
      溢出元素的寬度(document.body.scrollWidth）=父級(jí)元素的寬度(document.documentElement.scrollWidth)?-?滾動(dòng)條的寬度(在谷歌瀏覽器上滾動(dòng)條的寬度是19px)

      
      <!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?Dom各種距離</title>
????<style>
????????html,
????????body?{
????????????margin:?0;
????????}

????????body?{
????????????width:?110%;
????????????border:?10px?solid?blue;
????????}

????????.rect?{
????????????height:?50px;
????????????background-color:?green;
????????}
????</style>
</head>

<body>
????<div?id="rect"?class="rect"></div>
</body>

</html>

元素自身和父級(jí)元素的scrollWidth和scrollLeft關(guān)系?

從下圖可以看出:

元素自身沒有X軸偏移量，元素自身的滾動(dòng)寬度不包含滾動(dòng)條
父級(jí)元素有X軸便宜量, 父級(jí)元素滾動(dòng)寬度包含滾動(dòng)條

      
      <!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?Dom各種距離</title>
????<style>
????????div?{
????????????border:?1px?solid?#000;
????????????width:?200px;
????????????height:?600px;
????????????padding:?10px;
????????????background-color:?green;
????????????margin:?10px;
????????}
????</style>
</head>

<body>
????<div?class="rect">????111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
????</div>
</body>
<script>
</script>
</html>

offsetWidth和clientWidth的關(guān)系?

offsetWidth和clientWidth的共同點(diǎn)是都包括自身寬度+padding , 不同點(diǎn)是offsetWidth包含border。

如下圖所示:

rect元素的clientWidth=200px(自身寬度) + 20px(左右padding) = 220px
rect元素的offsetWidth=200px(自身寬度) + 20px(左右padding) + 2px(左右boder) = 222px

      
      <!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?Dom各種距離</title>
????<style>
????????div?{
????????????border:?1px?solid?#000;
????????????width:?200px;
????????????height:?100px;
????????????padding:?10px;
????????????background-color:?green;
????????????margin:?10px;
????????}
????</style>
</head>

<body>
????<div?class="rect">111111111111111111111111111111111111111111111111</div>
</body>
<script>


</script>

</html>

event.clientX，event.clientY, event.offsetX 和 event.offsetY 關(guān)系

代碼如下，給rect元素添加一個(gè)mousedown事件，打印出事件源的各種位置值。

      
      <!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?Dom各種距離</title>
????<style>
????????html,
????????body?{
????????????margin:?0;
????????}

????????body?{
????????????width:?200px;
????????????padding:?10px;
????????????border:?10px?solid?blue;
????????}

????????.rect?{
????????????height:?50px;
????????????background-color:?green;
????????}
????</style>
</head>

<body>

????<div?id="rect"?class="rect"></div>


</body>
<script>
????const?rectDom?=?document.querySelector('#rect');

????rectDom.addEventListener('mousedown',?({?offsetX,?offsetY,?clientX,?clientY,?pageX,?pageY,?screenX,?screenY?})?=>?{
????????console.log({?offsetX,?offsetY,?clientX,?clientY,?pageX,?pageY,?screenX,?screenY?});
????})
</script>

</html>

我們通過y軸方向的高度值,了解一下這幾個(gè)屬性的含義。綠色塊的高度是50px, 我們找個(gè)特殊的位置（綠色塊的右小角）點(diǎn)擊一下，如下圖所示:

offsetY=49, 反推出這個(gè)值是相對(duì)于元素自身的頂部的距離
clientY=69, body標(biāo)簽的border-top是10，paiding是10, 反推出這個(gè)值是相對(duì)網(wǎng)頁(yè)可視區(qū)域頂部的距離
screenY=140，目測(cè)肯定是基于瀏覽器窗口，

所以它們各自的含義,就很清楚了。

事件源屬性	表示的距離
event.offsetX、event.offsetY	鼠標(biāo)相對(duì)于事件源元素（srcElement）的X,Y坐標(biāo)，
event.clientX、event.clientY	鼠標(biāo)相對(duì)于瀏覽器窗口可視區(qū)域的X，Y坐標(biāo)（窗口坐標(biāo)），可視區(qū)域不包括工具欄和滾動(dòng)偏移量。
event.pageX、event.pageY	鼠標(biāo)相對(duì)于文檔坐標(biāo)的x,y坐標(biāo)，文檔坐標(biāo)系坐標(biāo) ＝視口坐標(biāo)系坐標(biāo) ＋滾動(dòng)的偏移量
event.screenX、event.screenY	鼠標(biāo)相對(duì)于用戶顯示器屏幕左上角的X,Y坐標(biāo)

pageX和clientX的關(guān)系

我們點(diǎn)擊下圖綠色塊的右下角，把pageX和clientX值打印出來。如下圖所示:

可視區(qū)域的寬度是360，點(diǎn)擊點(diǎn)的clientX=359(由于是手動(dòng)點(diǎn)擊,有誤差也正常)
水平方向的偏移量是56
pageX是415，360+56=416,考慮到點(diǎn)擊誤差，可以推算出 ele.pageX = ele.clientX + ele.scrollLeft

getBoundingClientRect獲取的top,bottom,left,right的含義

從下圖可以看出，上下左右這四個(gè)屬性，都是相對(duì)于瀏覽器可視區(qū)域左上角而言的。

從下圖可以看出，當(dāng)有滾動(dòng)條出現(xiàn)的時(shí)候，right的值是359.6，而不是360+156(x軸的偏移量), 說明通過getBoundingClientRect獲取的屬性值是不計(jì)算滾動(dòng)偏移量的，是相對(duì)瀏覽器可視區(qū)域而言的。

movementX和movementY的含義?

MouseEvent.movementX/movementX是一個(gè)相對(duì)偏移量。返回當(dāng)前位置與上一個(gè)mousemove事件之間的水平/垂直距離。以當(dāng)前位置為基準(zhǔn), 鼠標(biāo)向左移動(dòng), movementX就是負(fù)值，向右移動(dòng)，movementX就是正值。鼠標(biāo)向上移動(dòng),movementY就是負(fù)值，向下移動(dòng)，movementY就是正值。數(shù)值上，它們等于下面的計(jì)算公式。這兩個(gè)值在設(shè)置拖拽距離的時(shí)候高頻使用，用起來很方便。

      
      curEvent.movementX = curEvent.screenX - prevEvent.screenX;
curEvent.movementY = curEvent.screenY - prevEvent.screenY;

想移動(dòng)元素，mouse和drag事件怎么選?

mouse事件相對(duì)簡(jiǎn)單，只有mousedown(開始),mousemove(移動(dòng)中),mouseup(結(jié)束)三種。與之對(duì)應(yīng)的移動(dòng)端事件是touch事件，也是三種touchstart(手指觸摸屏幕), touchmove(手指在屏幕上移動(dòng)), touchend(手指離開屏幕)。

相對(duì)而言, drag事件就要豐富一些。

被拖拽元素事件

事件名	觸發(fā)時(shí)機(jī)	觸發(fā)次數(shù)
dragstart	拖拽開始時(shí)觸發(fā)一次	1
drag	拖拽開始后反復(fù)觸發(fā)	多次
dragend	拖拽結(jié)束后觸發(fā)一次	1

目標(biāo)容器事件

事件名	觸發(fā)時(shí)機(jī)	觸發(fā)次數(shù)
dragenter	被拖拽元素進(jìn)入目標(biāo)時(shí)觸發(fā)一次	1
dragover	被拖拽元素在目標(biāo)容器范圍內(nèi)時(shí)反復(fù)觸發(fā)	多次
drop	被拖拽元素在目標(biāo)容器內(nèi)釋放時(shí)(前提是設(shè)置了dropover事件)	1

想要移動(dòng)一個(gè)元素，該如何選擇這兩種事件類型呢？選擇依據(jù)是:

類型	選擇依據(jù)
mouse事件	1. 要求絲滑的拖拽體驗(yàn) 2. 無固定的拖拽區(qū)域 3. 無需傳數(shù)據(jù)
drag事件	1. 拖拽區(qū)域有范圍限制 2. 對(duì)拖拽流暢性要求不高 3. 拖拽時(shí)需要傳數(shù)據(jù)

現(xiàn)在讓我們寫個(gè)拖拽效果

光說不練假把式, 掃清了學(xué)習(xí)障礙后，讓我們自信滿滿地寫一個(gè)兼容PC端和移動(dòng)端的拖動(dòng)效果。不積跬步無以至千里，幻想一口吃個(gè)胖子，是不現(xiàn)實(shí)的。這一點(diǎn)在股市上體現(xiàn)的淋漓盡致。都是有耐心的人賺急躁的人的錢。所以，要我們沉下心來，打牢基礎(chǔ)，硬骨頭啃一點(diǎn)就會(huì)少一點(diǎn)，步步為營(yíng)，穩(wěn)扎穩(wěn)打，硬骨頭也會(huì)被啃成渣。

      
      <!DOCTYPE?html>
<html?lang="en">

<head>
????????
????<meta?charset="UTF-8"?/>????
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0"?/>???
????<title>移動(dòng)小鳥</title>
????<style>
????????body?{
????????????margin:?0;
????????????font-size:?0;
????????????position:?relative;
????????????height:?100vh;
????????}

????????.bird?{
????????????position:?absolute;
????????????width:?100px;
????????????height:?100px;
????????????cursor:?grab;
????????????z-index:?10;
????????}
????</style>
</head>

<body>
????<img?class="bird"?src="./bird.png"?alt=""?/>??
</body>

<script>
????let?evtName?=?getEventName();
????//?鼠標(biāo)指針相對(duì)于瀏覽器可視區(qū)域的偏移
????let?offsetX?=?0,?offsetY?=?0;
????//?限制圖片可以X和Y軸可以移動(dòng)的最大范圍，防止溢出
????let?limitX?=?0,?limitY?=?0;

????//?確保圖片加載完
????window.onload?=?()?=>?{
????????const?bird?=?document.querySelector(".bird");
????????const?{?width,?height?}?=?bird;

????????limitX?=?document.documentElement.clientWidth?-?width;
????????limitY?=?document.documentElement.clientHeight?-?height;

????????bird.addEventListener(evtName.start,?(event)?=>?{
????????????//?監(jiān)聽鼠標(biāo)指針相對(duì)于可視窗口移動(dòng)的距離
????????????//?注意移動(dòng)事件要綁定在document元素上，防止移動(dòng)過快,位置丟失
????????????document.addEventListener(evtName.move,?moveAt);
????????});

????????//?鼠標(biāo)指針停止移動(dòng)時(shí),釋放document上綁定的移動(dòng)事件
????????//?不然白白產(chǎn)生性能開銷
????????document.addEventListener(evtName.end,?()?=>?{
????????????document.removeEventListener(evtName.move,?moveAt);
????????})

????????//?移動(dòng)元素
????????function?moveAt({?movementX,?movementY?})?{
????????????const?{?offsetX,?offsetY?}?=?getSafeOffset({?movementX,?movementY?});

????????????window.requestAnimationFrame(()?=>?{
????????????????bird.style.cssText?=?`left:${offsetX}px;top:${offsetY}px;`;
????????????});
????????};
????};

????//?獲取安全的偏移距離
????const?getSafeOffset?=?({?movementX,?movementY?})?=>?{
????????//?//距上次鼠標(biāo)位置的X,Y方向的偏移量
????????offsetX?+=?movementX;
????????offsetY?+=?movementY;

????????//?防止拖拽元素被甩出可視區(qū)域
????????if?(offsetX?>?limitX)?{
????????????offsetX?=?limitX;
????????}

????????if?(offsetX?<?0)?{
????????????offsetX?=?0;
????????}

????????if?(offsetY?>?limitY)?{
????????????offsetY?=?limitY;
????????}

????????if?(offsetY?<?0)?{
????????????offsetY?=?0;
????????}

????????//?console.log({?movementX,?movementY,?offsetX,?offsetY?});
????????return?{?offsetX,?offsetY?};
????}

????//?區(qū)分是移動(dòng)端還是PC端移動(dòng)事件
????function?getEventName()?{
????????if?("ontouchstart"?in?window)?{
????????????return?{
????????????????start:?"touchstart",
????????????????move:?"touchmove",
????????????????end:?"touchend",
????????????};
????????}?else?{
????????????return?{
????????????????start:?"pointerdown",
????????????????move:?"pointermove",
????????????????end:?"pointerup",
????????????};
????????}
????}
</script>

</html>

彩蛋

在chrome瀏覽器上發(fā)現(xiàn)一個(gè)奇怪的現(xiàn)象,設(shè)置的border值是整數(shù)，計(jì)算出來的值卻帶有小數(shù)

而當(dāng)border值是4的整數(shù)倍的時(shí)候,計(jì)算值是正確的

看了文章( "https://www.w3.org/TR/CSS22/cascade.html#specified-value")解釋說，瀏覽器可能只能渲染具有整數(shù)物理像素的border值，不是整數(shù)物理像素的值時(shí)，計(jì)算出的是近似border值。這個(gè)解釋似乎講得通，在設(shè)備像素比是window.devicePixelRatio=1.25的情況下, 1px對(duì)應(yīng)的是1.25物理像素, 1.25*4的倍數(shù)才是整數(shù)，所以設(shè)置的邏輯像素是4的整數(shù)倍數(shù)，顯示的渲染計(jì)算值與設(shè)置值一致,唯一讓人不理解的地方，為什么padding,margin，width/height卻不遵循同樣的規(guī)則。

- EOF -