js获取移动端触摸坐标
想在touchmove事件里监听手指按下的坐标,event.pageX获取的是undefined,changedTouches,targetTouches,touches也只获得到了鼠标按下时的坐标,没法持续监听,求帮助!或者其他办法也行,效果大概是一个元素,手指在上面滑动,然后改变这个元素的top之类的...//禁用手机默认的触屏滚动行为
document.addEventListener('touchmove', function(event) {
event.preventDefault();
}, false);
//touchstart事件
function touchSatrtFunc(evt) {
try {
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标
//记录触点初始位置
startX = x;
startY = y;
} catch (e) {
alert('touchSatrtFunc:' + e.message);
}
}
//touchmove事件,这个事件无法获取坐标
function touchMoveFunc(evt) {
try {
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标
//document.getElementById("version").innerHTML = "原:"+startY+" "+"现:"+y;
//判断滑动方向 上下
if (y - startY > ) {
swipeDown();//你自己的方法 我是用来翻页的一样的
} else if(y - startY < -){
swipeUp();//你自己的方法
}
} catch (e) {
alert('touchMoveFunc:' + e.message);
}
}
//touchend事件
function touchEndFunc(evt) {
try {
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
} catch (e) {
alert('touchEndFunc:' + e.message);
}
}
//绑定事件
function bindEvent() {
document.addEventListener('touchstart', touchSatrtFunc, false);
document.addEventListener('touchmove', touchMoveFunc, false);
document.addEventListener('touchend', touchEndFunc, false);
}
//判断是否支持触摸事件
function isTouchDevice() {
//document.getElementById("version").innerHTML = navigator.appVersion;
try {
document.createEvent("TouchEvent");
//alert("支持TouchEvent事件!");
bindEvent(); //绑定事件
} catch (e) {
alert("不支持TouchEvent事件!" + e.message);
}
}
js获取移动端触摸坐标的更多相关文章
- js点击获取—通过JS获取图片的相对坐标位置
一.通过JS获取鼠标点击时图片的相对坐标位置 源代码如下所示: <!DOCTYPE html> <html lang="en"> <head> ...
- js 处理移动端触摸事件
在处理移动端的touch事件时,我们可以选择一些插件来处理,比如jquery ui touch punch.js 提供丰富的触摸效果,可以满足移动端的开发, 但是,有些移动端开发中,并不需要如此复杂的 ...
- js获取元素的页面坐标
一.DOM中各种宽度.高度 二.DOM中的坐标系 JS获取div元素的宽度 offsetWidth=width+padding-left+padding-right+border-left+borde ...
- js 获取服务端时间,并实现时钟
本例子以vue语法伪代码书写: 1,获取服务端北京时间 getRealTime() { let that = this; var xhr = new XMLHttpRequest(); if( !xh ...
- JS封装移动端触摸滑动插件应用于导航banner【精装版】
自己封装了一个小插件,一个小尝试. 可用于类似于京东导航等效果,效果多样化,很方便. 欢迎大家提点意见. mrChenSwiper( {parent, child, type, parentN, c ...
- js获取服务端IP及端口及协议
alert("location:"+window.location); alert("href: "+window.location.href); alert( ...
- JS获取坐标
1.js获取对象的绝对坐标 方法1: function getAbsPoint(e) { var x = e.offsetLeft, y = e.offsetTop; while(e=e.offset ...
- js获取控件位置以及不同浏览器中的差别
js获取控件位置(坐标位置)在不同浏览器中的差别. //获取坐标位置 function getpos(e) { var t=e.offsetTop; var l=e.offsetLeft; var h ...
- 原生js获取鼠标坐标方法全面讲解-zmq
原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...
随机推荐
- Sublime text3 插件ColorPicker(调色板)不能使用快捷键
我的原因是: convertToUTF8 和 ColorPicker 快捷键冲突,convertoUTF8的默认转换GBK的快捷键 和 ColorPicker打开调色板的快捷键都是ctrl+shift ...
- ScrollTo:实现平滑滚动到页面指定位置
ScrollTo:实现平滑滚动到页面指定位置 ScrollTo是一款基于jQuery的滚动插件,当点击页面的链接时,可以平滑地滚动到页面指定的位置.适用在一些页面内容比较多,页面长度有好几屏的场合,本 ...
- PAT甲级——1126 Eulerian Path
我是先在CSDN上发布的这篇文章:https://blog.csdn.net/weixin_44385565/article/details/89155050 1126 Eulerian Path ( ...
- idea | gitee 码云
https://blog.csdn.net/qq_32340877/article/details/81205547
- java数据结构----队列,优先级队列
1.队列:和栈中的情况不同,队列中的数据项不总是从数组下标0开始,移除一个数据项后,队头指针会指向下标较高的数据项,其特点:先入先出 2.图解 3.队列的实现代码: 3.1.Queue.java pa ...
- JQuery中的$().each 以及 $.each的区别
最近一直在研究JS,今天看到遍历模块的时候,看到了这个函数: $(selector).each(function(index,element)) 但是想想,这个函数和之前项目里面用到的遍历数据的函数不 ...
- tera term超级终端
一款Window上的虚拟终端工具,它同时支持串口连接和网络连接,而对于网络连接它支持Telnet和SSH协议.最关键的是Tera Term支持自己的脚本语言,即TTL(Tera Term Langua ...
- MySQL简单的确定瓶颈
如果接到报警可能需要ssh看看瓶颈是什么,怎么下手 确定os层 确定磁盘是否够用的:df –h 再看看系统整体状态: top 哪些进程占用资源比较多,能杀就杀 系统的负载 vmstat看看wa值,r列 ...
- js实现文本框验证和实现小数的加减乘除
<script type="text/javascript"> //加法 var m=accAdd(1.22,1.22); //减法 var m1=accSub(1.2 ...
- Java 语言中一个字符占几个字节?
Java中理论说是一个字符(汉字 字母)占用两个字节. 但是在UTF-8的时候 new String("字").getBytes().length 返回的是3 表示3个字节 作者: ...