在這一篇文章中,將會介紹滑鼠座標、元素座標以及滑鼠在指定元素內的座標。
獲取的座標可分為2種:
1) mouseevent.screenx、mouseevent.screeny:基於螢幕的x、y座標;以螢幕的左上角為0,0起始點。
2) mouseevent.clientx、mouseevent.clienty:基於body的x、y座標;以當前body的左上角為0,0起始點,若body含有水平滾動條或垂直滾動條時,左上角還是0,0座標點。
元素的getboundingclientrect()方法可獲取乙個clientrect物件,其描述了元素的方位和寬高等資訊。
屬性名稱
屬性說明
width
元素的寬度
height
元素的高度
left
元素左上角距離當前可視body的寬度
top元素左上角距離當前可視body的高度
right
元素右下角距離當前可視body的寬度;right = left + width
bottom
元素右下角距離當前可視body的高度;bottom = top + height
除了這些直接屬性外,還可以結合其他元素獲取更詳細的座標:
1) 元素左上角在整體body的水平座標= document.body.scrollleft + element.getboundingclientrect().left;
2) 元素左上角在整體body的垂直座標= document.body.scrolltop + element.getboundingclientrect().top;
通過之前學到的獲取滑鼠座標和元素座標後,還可進一步獲取滑鼠在元素內的座標。
以滑鼠在元素內的x座標為例,等於滑鼠的 clientx 減去 元素的getboundingclientrect()放的left,最後在加上元素的scrollleft的值。
公式如下:
web開發之路系列文章
獲取html元素的座標
獲取相對於頁面的座標 x e.offsetleft p e.offsetparent while p do x x p.offsetleft p p.offsetparent end return x y e.offsettop p e.offsetparent while p do y y p.o...
vue 滑鼠座標
方法介紹 關於js滑鼠事件獲取到座標的屬性總共以下五種 event.clientx y event.pagex y event.offsetx y event.layerx y event.screenx y clientx y clientx y獲取到的是觸發點相對瀏覽器可視區域左上角距離,不隨頁...
根據滑鼠座標取該座標下的元素,包括touch
根據座標獲取元素的方法 document.elementfrompoint pagex,pagey 或者document.elementfrompoint clientx,clienty 如果是pc瀏覽器監聽滑鼠事件,可以一直使用event物件獲取座標值 如果是平板,監聽的是touchstart,t...