鼠標行為

e.屬性含義相關屬性

clientX/Y	鼠標位置相對于當前可視區域的坐標	x/y（FF火狐部分版本不支持）
pageX/Y(IE9以下不支持)	鼠標位置相對于當前文檔的坐標	layerX/Y (IE11以下同clientX/Y)
screenX/Y	鼠標位置相對于顯示器屏幕的坐標
offsetX/Y	鼠標位置相對于塊元素的坐標（以左上角為頂點，包括邊框，Safari不包括邊框）

pageXY封裝

// 兼容性寫法：獲取相對文檔的位置 function pagePos(e) {var sLeft = getScrollOffset().left,sTop = getScrollOffset().top,cLeft = document.documentElement.clientLeft || 0,// 獲取文檔偏移，若值為undefined，取偏移為0cTop = document.documentElement.clientTop || 0;return {X: e.clientX + sLeft - cLeft,Y: e.clientY + sTop - cTop,} }

拖拽

• mousemove是基于mousedown事件的

oBox.onmousedown = function (e) {document.onmousemove = function (e) {var e = e || window.event,page = pagePos(e);oBox.style.left = page.X + 'px'oBox.style.top = page.Y + 'px'} } oBox.onmouseup = function (e) {document.onmousemove = null } // 拖拽的時候，box的左上角頂點不要突變到鼠標的位置 oBox.onmousedown = function (e) {var e = e || window.event,x = pagePos(e).X - parseInt(getStyles(this, 'left')),y = pagePos(e).Y - parseInt(getStyles(this, 'top'));document.onmousemove = function (e) {var e = e || window.event,page = pagePos(e);oBox.style.left = page.X - x + 'px'oBox.style.top = page.Y - y + 'px'}document.onmouseup = function (e) {this.onmousemove = nullthis.onmouseup = null} } // 封裝拖拽函數 function elemDrag(elem) {var x,y;addEvent(elem, 'mousedown', function (e) {var e = e || window.event;x = pagePos(e).X - parseInt(getStyles(elem, 'left'))y = pagePos(e).Y - parseInt(getStyles(elem, 'top'))console.log(x, y)addEvent(document, 'mousemove', mouseMove)addEvent(document, 'mouseup', mouseUp)cancelBubble(e)preventDefaultEvent();function mouseMove(e) {var e = e || window.event,page = pagePos(e)elem.style.top = page.Y - y + 'px'elem.style.left = page.X - x + 'px'}function mouseUp(e) {var e = e || window.eventremoveEvent(document, 'mousemove', mouseMove)removeEvent(document, 'mouseup', mouseUp)}}) }

總結

以上是生活随笔為你收集整理的DOM-11 【兼容】鼠标行为坐标系、pageXY封装、拖拽函数封装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。