【JavaScript 进阶之旅 DOM篇第九章】鼠标行为、pageX|Y封装、拖拽事件封装

文章目录

一、鼠标行为
- 1、clientX/Y
- 2、pageX/Y
- 3、screenX/Y
- 4、offsetX/Y
- 5、layerX/Y（不推荐使用）
- 6、x/y（不推荐使用）
二、pageX|Y封装
三、拖拽事件
- 1、mousedown 鼠标按下事件
- 2、mousemove 鼠标移动事件
- 3、mouseup 鼠标抬起事件
- 4、拖拽案例
四、封装拖拽函数

一、鼠标行为

box.onclick = function(e) {var e = e || window.event;console.log(e.clientX); // ...
}

1、clientX/Y

鼠标相对于当前可视区域的坐标（不包括滚动条的距离）

2、pageX/Y

鼠标位置相对于当前文档的坐标（包括滚动条的距离）

IE9以下不支持（jQuery标准）

3、screenX/Y

鼠标位置相对于屏幕的坐标

4、offsetX/Y

鼠标位置相对于块元素的坐标（包含边框）

safari 不包括边框

5、layerX/Y（不推荐使用）

鼠标位置相对于当前文档的坐标

IE11以下：鼠标位置相对于当前可视区域的坐标

6、x/y（不推荐使用）

鼠标位置相对于当前可视区域的坐标

Firefox不支持（老版肯定不支持）

二、pageX|Y封装

// 获取滚动距离
function getScrollOffset() {if(window.pageXOffset) {return {left: window.pageXOffset,top: window.pageYOffset}}else {return {left: document.body.scrollLeft + document.documentElement.scrollLeft,top: document.body.scrollTop + document.documentElement.scrollTop}}
}// 封装获取pageXY值方法
function pagePos(e) {var sLeft = getScrollOffset().left, // x轴的滚动距离sTop = getScrollOffset().top, // y轴的滚动距离cLeft = document.documentElement.clientLeft || 0, // 文档x轴偏移距离cTop = document.documentElement.clientTop || 0; // 文档y轴偏移距离return {x: e.clientX + sLeft - cLeft,y: e.clientY + sTop - cTop}
}

三、拖拽事件

1、mousedown 鼠标按下事件

2、mousemove 鼠标移动事件

3、mouseup 鼠标抬起事件

4、拖拽案例

// 获取元素的pageX 跟 pageY
function pagePos(e) {var sLeft = getScrollOffset().left, // x轴的滚动距离sTop = getScrollOffset().top, // y轴的滚动距离cLeft = document.documentElement.clientLeft || 0, // 文档x轴偏移距离cTop = document.documentElement.clientTop || 0; // 文档y轴偏移距离return {x: e.clientX + sLeft - cLeft,y: e.clientY + sTop - cTop}
}// 获取滚动条距离的方法
function getScrollOffset() {if(window.pageXOffset) { // 该方法在IE9以下不支持console.log(window.pageXOffset,window.pageYOffset);return {left: window.pageXOffset,top: window.pageYOffset}}else {return { // 在chrome中他俩必定有一个为0，所以就相加left: document.body.scrollLeft + document.documentElement.scrollLeft,top: document.body.scrollTop + document.documentElement.scrollTop}}
}// 获取元素属性的方法
function getStyles(elem, prop) {if(window.getComputedStyle) {if(prop) {return window.getComputedStyle(elem)[prop];}else {return window.getComputedStyle(elem);}}else {if(prop) {return elem.currentStyle[prop];}else {return elem.currentStyle;}}
}var box = document.getElementsByTagName('div')[0];// 拖拽案例逻辑
box.onmousedown  = function(e) {var e = e || window.event;x = pagePos(e).x - parseInt(getStyles(box, 'left'));y = pagePos(e).y - parseInt(getStyles(box, 'top'));document.onmousemove = function(e) {var e = e || window.event;box.style.left = pagePos(e).x - x + 'px';box.style.top = pagePos(e).y - y + 'px';}document.onmouseup = function(e) {this.onmousemove = null;this.onmouseup = null;}}

四、封装拖拽函数

function elemDrag(elem) {var x,y;addEvent(elem, 'mousedown', function(e) {var e = e || window.event;// x = PageX - elem.leftx = pagePos(e).x - getStyles(elem, 'left');y = pagePos(e).y - getStyles(elem, 'top');addEvent(document, 'mousemove', mouseMove);addEvent(document, 'mouseup', mouseUp);// 阻止事件冒泡跟默认事件cancelBubble(e);preventDefaultEvent(e);});function mouseMove(e) {var e = e || window.event;elem.style.left = pagePos(e).x - parseInt(x) + 'px';elem.style.top = pagePos(e).y - parseInt(y) + 'px';}function mouseUp(e) {var e = e || window.event;removeEvent(document, 'mousemove', mouseMove);removeEvent(document, 'mouseup', mouseUp);}
}

【JavaScript 进阶之旅 DOM篇第九章】鼠标行为、pageX|Y封装、拖拽事件封装相关推荐

【JavaScript进阶之旅 ES6篇第十五章】Set、Map、Set跟Map跟Array跟Object的对比
文章目录一.Set 1.基本用法 2.Set.prototype 二.Map 1.基本用法 a. 键名为对象时 b. 普遍对象不能实现键值一一对应 c. Map数据结构实现键为对象的一一对应 d. ...
threejs进阶，管道几何体高级应用，geometry几何体应用，可拖拽改变形状的管道
threejs进阶,管道几何体高级应用,geometry几何体应用,可拖拽改变形状的管道一.threejs是什么? 二.geometry几何体使用步骤 1.引入库 2.如果使用谷歌浏览器打不开报错, ...
JavaScript中的拖拽事件且限制出界
JavaScript中的拖拽事件限制出界 JavaScript事件中很多都会用到拖拽,而在现实中很多拖拽是会限制在浏览器界面禁止出界的,下面是封装好的限制出界的拖拽事件. function drag( ...
鸟哥的Linux私房菜(基础篇)- 第九章、文件与文件系统的压缩与打包
第九章.文件与文件系统的压缩与打包最近升级日期:2009/08/20 在 Linux 底下有相当多的压缩命令可以运行喔!这些压缩命令可以让我们更方便从网络上面下载大型的文件呢!此外,我们知道在 Li ...
前端基础进阶（十）：面向对象实战之封装拖拽对象
https://segmentfault.com/a/1190000012646488 https://yangbo5207.github.io/wutongluo/ 说明:此处只是记录阅读前端基础 ...
javascript event click/dblclick left/right区分左键、右键、双击事件，排除点击事件与拖拽事件冲突，做防抖优化
/*** 函数防抖(目标时间段内,目标函数只执行最后一次)* @param {*} func 目标函数* @param {*} wait 目标时间段* @param {*} immediate 是否立 ...
【JavaScript进阶之旅函数式编程篇第三十四章】函数组合、结合律、pointfree、使用案例
文章目录一.函数组合 1.左倾(高阶函数的左倾) 2. 组合多个函数方法一(使用while) 方法二:优化组合函数(使用reduceRight) 二.结合律三.pointfree 一.函数组合 ...
JavaScript学习笔记之DOM篇，带你全面了解什么是DOM
DOM在前面的JavaScript学习笔记(一)–JS基础里简单提到过,它是浏览器厂商提供的用来控制html / css 的代码的文档对象模型,是JavaScript的重要组成部分,现在带大家详细了解 ...
JavaScript进阶面向对象ES6整合篇
整合篇整体内容比较多,详细点可以查询目录文章目录一.JavaScript面向对象 1.面向对象编程介绍 2.ES6中的类和对象 3.类的继承 4.案例:面向对象案例二.构造函数和原型 1. 构造 ...

【JavaScript 进阶之旅 DOM篇第九章】鼠标行为、pageX|Y封装、拖拽事件封装

文章目录

一、鼠标行为

1、clientX/Y

2、pageX/Y

3、screenX/Y

4、offsetX/Y

5、layerX/Y（不推荐使用）

6、x/y（不推荐使用）

二、pageX|Y封装

三、拖拽事件

1、mousedown 鼠标按下事件

2、mousemove 鼠标移动事件

3、mouseup 鼠标抬起事件

4、拖拽案例

四、封装拖拽函数

【JavaScript 进阶之旅 DOM篇第九章】鼠标行为、pageX|Y封装、拖拽事件封装相关推荐

最新文章

热门文章

【JavaScript 进阶之旅 DOM篇 第九章】鼠标行为、pageX|Y封装、拖拽事件封装

文章目录

一、鼠标行为

1、clientX/Y

2、pageX/Y

3、screenX/Y

4、offsetX/Y

5、layerX/Y（不推荐使用）

6、x/y（不推荐使用）

二、pageX|Y封装

三、拖拽事件

1、mousedown 鼠标按下事件

2、mousemove 鼠标移动事件

3、mouseup 鼠标抬起事件

4、拖拽案例

四、封装拖拽函数

【JavaScript 进阶之旅 DOM篇 第九章】鼠标行为、pageX|Y封装、拖拽事件封装相关推荐

最新文章

热门文章

【JavaScript 进阶之旅 DOM篇第九章】鼠标行为、pageX|Y封装、拖拽事件封装

【JavaScript 进阶之旅 DOM篇第九章】鼠标行为、pageX|Y封装、拖拽事件封装相关推荐