您现在的位置是:首页 > Javascript
当前栏目
手机网页中手指触摸计算 --JQuery 获取touchstart,touchmove,touchend 坐标
2023-02-19 12:22:21 时间
JQuery写法
1 //手指开始触摸时,触发事件
2 $("#id").on('touchstart',function(e){
3
4 var touch = e.originalEvent.targetTouches[0]; //取页面上第一个手指
5
6 var x_ distance = touch.pageX; //获取手指在X轴上距最左边的距离
7
8 })
三个函数:
- touchstart --(手指放在页面时触发)
- touchend --(手指离开页面时触发)
- touchmove --(手指移动时触发)
获取手指第几个函数:
- e.originalEvent.changedTouches[0] --(获取第一个手指,0->1)
获取距离(touch为获取手指的变量名):
- touch.pageX --获取手指在X轴上距最左边的距离
- touch.pageY --获取手指在Y轴上距最上边的距离
原生写法
1 //原生写法
2 document.getElementById("id").addEventListener("touchstart",function(e){
3 var x=e.touches[0].pageX; //第一个手指距最左边距离
4 var y=e.touches[0].pageY; //第一个手指距最上边距离
5 })
相关文章
- 正则表达式语法-JavaScript中的正则表达式详解
- js 数组去除重复数据-5 个提升你 JS 编码水平的实例
- js 数组去除重复数据-Vue.js开发移动端经验总结
- React.js基础知识总结一
- React.js简单轮播图组件封装
- React.js基础知识 函数组件和类组件(二)
- js for in for of 的区别
- js正则表达式基础知识
- parcel打包Vue.js零配置
- javascript学习之Pointfree是什么
- javascript学习之函数组合
- javascript中柯里化
- javascript的纯函数,纯函数怎么定义
- javascript必须要知道的闭包,怎么调试闭包
- javascript中函数试编程范式,为什么要学习函数式编程
- nodejs之npm切换源
- javascript异步编程之generator(生成器函数)与asnyc/await语法糖
- JavaScript的异步编程之Promise
- javascript编程单线程之异步模式Asynchronous
- javascript编程单线程之同步模式