pc 端与移动端区分点击与拖拽事件

PC 端
移动端

在 html 的应用中，拖拽事件为 mousedown -> mousemove -> mouseup 三个事件组成，在一个有拖拽事件的 div 中监听一个 click 事件，当拖拽之后也会出发 click 事件，为了不让拖拽事件影响到点击事件，需要区分点击事件和拖拽事件

PC 端

示例代码

 <!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>Click</title><style>#container {width: 500px;height: 500px;background-color: aqua;}</style></head><body><div id="container"></div><script>const container = document.getElementById('container');container.addEventListener('mousedown', (event) => {console.log('mousedown event is', event)})container.addEventListener('mouseup', (event) => {console.log('mouseup event is', event)})</script></body></html>

当点击时，可以查看打印信息

点击时的打印信息
拖拽后的打印信息

可以看出点击后的 mousedown 和 mouseup 的 MouseEvent 的 clientX 与 clientY 的值是相等的，而拖拽后的 clientX 与 clientY 的值不同，故可以通过判断 clientX 和 clientY 的值来判断点击事件或者拖拽事件，修改后的代码为：

<!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>Click</title><style>#container {width: 500px;height: 500px;background-color: aqua;}</style>
</head>
<body><div id="container"></div><script>const clientOffset = {};const container = document.getElementById('container');container.addEventListener('mousedown', (event) => {clientOffset.clientX = event.clientX;clientOffset.clientY = event.clientY;})container.addEventListener('mouseup', (event) => {const clientX = event.clientX;const clientY = event.clientY;if (clientX === clientOffset.clientX && clientY === clientOffset.clientY) {console.log('click');} else {console.log('drag');}})</script>
</body>
</html>

移动端

在移动端中，点击以及拖拽时没有 mousedown 和 mouseup 事件，所以我们需要使用移动端的事件，移动端的事件如下

事件	作用	与 pc 端对应
touchstart	手指按倒屏幕上	mousedown
touchmove	手指在屏幕上滑动	mousemove
touchend	手指离开屏幕	mouseup
touchcancle	特殊情况下关闭/退出时触发	-

所以我们需要使用 touchstart 和 touchend 来代替 mousedown 和 mouseup，并且 TouchEvent 接口的点击位置在 event.changeTouches 列表中记录，所以取 clientOffset 值的时候需要从 changeTouches 列表中取值

示例代码

 <!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>Click</title><style>#container {width: 200px;height: 200px;background-color: aqua;}</style></head><body><div id="container"></div><script>const clientOffset = {};const container = document.getElementById('container');container.addEventListener('touchstart', (event) => {clientOffset.clientX = event.changedTouches[0].clientX;clientOffset.clientY = event.changedTouches[0].clientY;})container.addEventListener('touchend', (event) => {const clientX = event.changedTouches[0].clientX;const clientY = event.changedTouches[0].clientY;if (clientX === clientOffset.clientX && clientY === clientOffset.clientY) {console.log('click');} else {console.log('drag');}})</script></body></html>

pc 端与移动端区分点击与拖拽事件相关推荐

DOM-12 【模拟桌面待讲评】鼠标事件深入、点击与拖拽分离、双击事件
鼠标事件深入点击事件 = mousedown + mouseup position: absolute 会将内联元素变为块级(比如a) a标签的协议限定符(伪协议,防止跳转和刷新,让href不生效) ...
标签页添加点击事件和拖拽事件
:draggable="true" 放在Tabs表示标签页可拖拽 @on-drag-drop="handleDragDrop" 给Tabs添加拖拽事件: cha ...
解决百度地图移动端（微信浏览器等）拖拽事件和点击事件冲突的BUG
在手机端,如果启用了百度地图的拖拽,那么部分手机上点击事件无法触发,无法获取点击位置的坐标,除非禁用拖拽的功能. 但如果禁用拖拽后,用户体验就很差,所以以下代码可以直接解决问题,亲测可用,如有疑问可以 ...
javascript event click/dblclick left/right区分左键、右键、双击事件，排除点击事件与拖拽事件冲突，做防抖优化
/*** 函数防抖(目标时间段内,目标函数只执行最后一次)* @param {*} func 目标函数* @param {*} wait 目标时间段* @param {*} immediate 是否立 ...
H5实现多图片预览上传，可点击可拖拽控件介绍
在做图片上传时发现一个蛮好用的控件,支持多张图片同时上传,可以点击选择图片,也可以将图片拖拽到上传框直接上传,方便,好用,接口也简单,基本可以直接放到项目里使用. 先看看他的样式: 选择图片后: $( ...
Python记录鼠标的点击与拖拽时间并在文本文档中保存记录
网上看到很多 python 关于记录鼠标操作轨迹的方法,很少提到关于时间的记录. 因为在写一个关于游戏的脚本,为了尽可能地还原真人鼠标操作防止封号,鼠标的点击的时间间隔是其中尤为重要的一点.代码监听了 ...
element vue 点击一边拖拽改变宽度解决拖动会选中文字的问题
实现效果: 实现代码: //最外边的这个是放表格容器的div <div @mousemove="shrinkMove" @mouseup="shrinkUp&quo ...
点击图片放大,实现移动端双指缩放,单指拖拽功能
记录一下最近项目中用到的点击图片出现一个遮罩层,同时放大图片显示,移动端可双指缩放图片并单指拖拽图片.再次点击遮罩层透明区域,遮罩层消失一.实现效果: 页面原图展示: 点击图片后: 二.代码实现: ...
JS拖动事件（鼠标拖动事件）手指事件（PC移动端拖拽）
写了好几次的PC端和移动端的拖拽效果了,每次都要重新查阅资料,现在做个总结记录,方便以后随时查阅要想写拖拽事件,首先得了解三块知识点: PC的鼠标拖动事件移动端的手指事件能拿到被移动元素的高宽, ...

pc 端与移动端区分点击与拖拽事件

pc 端与移动端区分点击与拖拽事件

PC 端

移动端

pc 端与移动端区分点击与拖拽事件相关推荐

最新文章

热门文章