手机端拖拽事件,获取pageX和pageY坐标方式
手机端拖拽事件:
touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。
touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。
touchend事件:当手指从屏幕上离开的时候触发。
调用方法:
(1)jquery方法:$(document).bind("touchend", function(e){});
(2)javascript方法:document.addEventListener("touchend",function(e){});
手机端获取pageX和pageY:
touchstart事件下获取:e.originalEvent.targetTouches[0].pageX。
touchmove事件下获取:e.originalEvent.targetTouches[0].pageX。
touchend事件的下获取:e.originalEvent.changedTouches[0].pageX 。
每个Touch对象包含的属性如下。
clientX:触摸目标在视口中的x坐标。
clientY:触摸目标在视口中的y坐标。
identifier:标识触摸的唯一ID。
pageX:触摸目标在页面中的x坐标。
pageY:触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触目的DOM节点目标。
手机端拖拽事件,获取pageX和pageY坐标方式相关推荐
- html 手机端拖拽效果,JS实现移动端触屏拖拽功能
1.html 2.css * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } #div1 { width: 5 ...
- 【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: clientX/clientY属性:获得事件发生时鼠标指针在视口中的水平和垂直坐标. screenX/screenY属性:获取鼠标事件发生时鼠标光标相对于整个电脑屏幕的 ...
- vuejs 原生JS 拖拽事件案例
原生JS or Vue 事件案例合集(详细) 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 Section 1 单个或多个鼠标拖拽事件的理解 提示:写完文章后,目录可以自动生成,如 ...
- UGUI事件之Drag拖拽事件
UI事件之Drag拖拽事件 ======================================================== 2.UGUI 事件命名空间 当我们需要使用 UGUI 中的 ...
- 标签页添加点击事件和拖拽事件
:draggable="true" 放在Tabs表示标签页可拖拽 @on-drag-drop="handleDragDrop" 给Tabs添加拖拽事件: cha ...
- js控制文件拖拽,获取拖拽内容。
在用户拖拽文件到浏览器的某个元素上时,js可以监听到与拖拽相关的事件,并对拖拽结果进行处理,本文讨论下和拖拽文件相关的一些问题,不过没有处理太多关于兼容性的问题. 拖拽事件 js能够监听到拖拽的事件有 ...
- JavaScript学习第十六天(键盘事件、表单事件、拖拽事件、框架事件、媒体事件)
文章目录 键盘事件 表单事件 剪贴板事件 拖拽事件 打印事件 框架事件 媒体事件 总结 键盘事件 onkeydown 键盘按下事件,当有按键按下时触发 onkeyup 键盘松开事件,当有按键被松开时触 ...
- js控制文件拖拽,获取拖拽内容
在用户拖拽文件到浏览器的某个元素上时,js可以监听到与拖拽相关的事件,并对拖拽结果进行处理,本文讨论下和拖拽文件相关的一些问题,不过没有处理太多关于兼容性的问题. 拖拽事件 js能够监听到拖拽的事件有 ...
最新文章
- pandas使用dt.year(month/day/hour/minute/second)函数抽取dataframe日期数据列对应的年月日时分秒信息
- 我的python之路(四):列表
- [TCP/IP] SSL的通讯原理
- centos 6.5 安装 lamp 后mysql不能启动_Lamp的搭建--centos6.5下安装mysql
- java ora 00911_ORA-00911错误
- LeetCode 1758. 生成交替二进制字符串的最少操作数(DP)
- mysql unknown column mysql.user_MYSQL创建用户Unknown column 'plugin' in 'mysql.user'的解决
- 苹果推送iOS 15.0.1版本 修复涉及iPhone 13的Bug
- 推荐一个很好的富文本web编辑器UEditor
- USDC流通量已经超过33亿
- 新年祝福短信|2011
- 阿里巴巴集团 CTO 约你聊聊这些事
- 蔡勒公式与Python
- 引领智慧教育,联想云桌面如何打造教育“一朵云”?
- COMSOL 电场与热场耦合
- 电容有哪些用途?常见的九大作用
- QQ文件七天未接收失效怎么办?QQ文件失效怎么恢复
- 两路VL53L0X激光测距传感器的使用
- Enter键绑定按钮或方法
- 计算机和人脑在线阅读,人脑与电脑
热门文章
- 【译】利用Lombok消除重复代码
- 我的AA字体美化方法【方正圆体字】(转)
- Ubuntu Desktop - gnome-calculator (计算器)
- 2022-1-19 Leetcode.205.同构字符串
- 2021-09-17meituan-013.偏爱字母
- PHP解析HTTP_USER_AGENT 获取客户端手机型号
- (四)PHP解析HTTP_USER_AGENT 获取客户端手机型号
- 小项目:单片机可控硅调光设计带光耦过零检测 元器件清单 源代码原理图等
- [数位dp]招商银行笔试---填补数字
- http://chdbits.org/signup.php 邀请码,hdchina论坛_chdbits 新地址_hdchina.club邀请码