鼠标行为

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封装、拖拽函数封装相关推荐

【JavaScript 进阶之旅 DOM篇第九章】鼠标行为、pageX|Y封装、拖拽事件封装
文章目录一.鼠标行为 1.clientX/Y 2.pageX/Y 3.screenX/Y 4.offsetX/Y 5.layerX/Y(不推荐使用) 6.x/y(不推荐使用) 二.pageX|Y封装 ...
Js实现拖拽 --面向对象封装( 超详细中文注释)
这类文章网上的很多.我只是做了详细的中文注释.便于大家理解. --废话不多说直接上源码 (用到的图片请随便自己代替) javascript代码部分: 1 /**js拖拽特效封装*/ 2 //关于js ...
JS实现拖拽并解决拖拽过程中鼠标抬起仍旧处于拖拽状态问题
需求分析实现一个任意元素可以被鼠标任意拖拽:鼠标在这个元素上按下,开始拖拽,元素跟着鼠标一起移动,当鼠标松开时,被拖拽的元素固定在当前位置上.如图所示(底下灰色的轨迹不知道为啥录制动图就出现了,实际 ...
JS拖拽不流畅、鼠标滑动太快导致拖拽物脱离鼠标问题
###拖拽的实现原理:通过事件mousedown(事件的触发) →mousemove(事件的控制) →mouseup(事件的清除),拖拽的过程就是mousemove阶段: ###问题产生的原因:因为m ...
js面向对象思想封装拖拽功能，兼容pc和移动端
我们在开发项目过程中,很可能会碰到页面上某块需要可以拖拽移动的功能需求,网上已经有不少前辈分享了相关功能的案例,插件或者代码,但是考虑到项目功能需求,我们可能仅需要实现拖拽移动功能就可以,不需要其他功 ...
歌词同步滚动，比市面的大多数效果都好，在平滑滚动的前提下加上了鼠标滚轮滚动以及上下拖拽功能
歌词滚动核心原理解析歌词文件,转换成JSON 对象,java 代码放在最下面将歌词时间部分存到数组,字符部分放到 HTML 标签里面,通过Jquery 选中所有歌词 $li ,拿到一个类似于数组的 ...
前端基础进阶（十）：面向对象实战之封装拖拽对象
https://segmentfault.com/a/1190000012646488 https://yangbo5207.github.io/wutongluo/ 说明:此处只是记录阅读前端基础 ...
JavaScript(11) - 阻止事件冒泡和默认行为,拖拽,事件监听器
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录一.阻止事件冒泡和默认行为二.拖拽 1, 实现拖拽相关的三大事件: 2, 实现拖拽思路: 1, 给目标元素添加onmous ...
Angular2封装拖拽指令
一:创建drag.directive.ts 代码如下: /* 1.Directive提供@Directive装饰器功能. 2.ElementRef注入到指令构造函数中.这样代码就可以访问 DOM 元素 ...

DOM-11 【兼容】鼠标行为坐标系、pageXY封装、拖拽函数封装

鼠标行为

pageXY封装

拖拽

DOM-11 【兼容】鼠标行为坐标系、pageXY封装、拖拽函数封装相关推荐

最新文章

热门文章