JS移动端获取触控位置

想在touchmove事件里监听手指按下的坐标,event.pageX获取的是undefined,changedTouches,targetTouches,touches... 想在touchmove事件里监听手指按下的坐标,event.pageX获取的是undefined,changedTouches,targetTouches,touches也只获得到了鼠标按下时的坐标,没法持续监听,求帮助!或者其他办法也行,效果大概是一个元素,手指在上面滑动,然后改变这个元素的top之类的,这个改变是在手指滑动的过程中变化的。 展开
 我来答
百度网友faadf46
高粉答主

2019-07-22 · 说的都是干货,快来关注
知道答主
回答量:4556
采纳率:0%
帮助的人:72.2万
展开全部

1、如图位置是一个html中的可编辑内容的div标签,在里边输入文字,会有一个光标。

2、通过getSelection可以获得一个Selection对象,如图。因为是一个光标,anchor和focus(选择的起点和终点)一样,偏移也一样。

3、如图,则进行文字选择,而且是跨行选择,以第一行为起点,第二行为终点,选择文字。

4、再次getSelection,可以看到anchorNode是起始节点,anchorOffset是起始偏移,focus是结束的。

5、如果从第二行倒着选到第一行,使用getSelection获取选择区域,可以看到anchorNode和focusNode和刚才相比,互换了。

6、使用一个node的textContent属性可以获得文字。结合focusOffset和anchorOffset,实际上可以获取光标/选中区域前后的文字。

7、将起始和结束位置设置为相同,而且都在结束节点的末尾。即变成闪烁光标。

博学小赵爱生活
高能答主

2019-06-02 · 专注于食品生活科技行业
博学小赵爱生活
采纳数:456 获赞数:111868

向TA提问 私信TA
展开全部

document.addEventListener('touchmove', function(event) {

event.preventDefault();

}, false);

//touchstart事件

function touchSatrtFunc(evt) {

try {

//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等。

var touch = evt.touches[0]; //获取第一个触点。

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[0]; //获取第一个触点。

var x = Number(touch.pageX); //页面触点X坐标。

var y = Number(touch.pageY); //页面触点Y坐标。

//document.getElementById("version").innerHTML = "原:"+startY+"   "+"现:"+y;

//判断滑动方向 上下。

if (y - startY > 100) {

swipeDown();//自己的方法 是用来翻页的一样的。

} else if(y - startY < -100){

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移动端上的触摸事件:

基本事件:

touchstart //手指刚接触屏幕时触发;

touchmove //手指在屏幕上移动时触发;

touchend //手指从屏幕上移开时触发;

下面这个比较少用:touchcancel //触摸过程被系统取消时触发。 

每个事件都有以下列表,比如touchend的targetTouches当然是 0 :

touches //位于屏幕上的所有手指的列表;

targetTouches //位于该元素上的所有手指的列表;

changedTouches //涉及当前事件的所有手指的列表。

每个事件有列表,每个列表还有以下属性:

其中坐标常用pageX,pageY: 

pageX //相对于页面的 X 坐标;

pageY //相对于页面的 Y 坐标;

clientX //相对于视区的 X 坐标; 

clientY //相对于视区的 Y 坐标;

screenX //相对于屏幕的 X 坐标 ;

screenY //相对于屏幕的 Y 坐标;

identifier // 当前触摸点的惟一编号;

target //手指所触摸的 DOM 元素 。 

其他相关事件:

event.preventDefault() //阻止触摸时浏览器的缩放、滚动条滚动;

var supportTouch = "createTouch" in document //判断是否支持触摸事件。

单点触摸事件 :

如果想在桌面上模拟单点触摸事件的话,试一下Phantom Limb,该程序在网页上模拟触摸事件并提供一只巨手来引导。

另外还有Touchable这一jQuery插件,该插件跨平台地统一了触摸和鼠标事件 

多点触摸事件:

为了能够让自己的多点触摸web应用在浏览器或是多点触摸控板(比如说Apple MacBook或是MagicPad)上起作用,创建了这一个MagicTouch.js填充工具,其捕捉来自触控板的触摸事件,然后把它们转换成标准兼容的触摸事件。 

touch事件:

touch事件可以分为单点触摸和多点触摸两种,单点触摸高端机一般都支持,Safari2.0、Android3.0以上的版本支持多点触摸。

支持最多5个手指同时触摸屏幕,ipad最多支持11个手指同时触摸屏幕, 我们可以采用以下的事件模型捕获这些事件:ontouchstart,ontouchmove,ontouchend,ontouchcancel。

当用户按下手指在屏幕上,ontouchstart会被触发,当用户移动一个或多个手指的时候,ontouchmove会被触发,当用户移走手指, ontouchend被触发。

当一些更高级别的事件发生的时候,例如,alert,有电话打来或者有 推送的消息提示的时候会取消当前的touch操作,即触发ontouchcancel。

当开发一个web game的时候,ontouchcancel很重要,可以在ontouchcancel触发的时候暂停游戏或者保存游戏。 

gesture事件:

gesture事件的运行原理与touch事件相同,只是gesture事件仅当屏幕上存在至少两个手指时触发,所以Safari2.0、Android3.0以上版本支持, 手势具备诸多优势。

可以帮助我们测量两指放缩和旋转操作,事件模型如下:ongesturestart,ongesturechange,ongestureend。

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
地球仪826
推荐于2017-09-19 · TA获得超过101个赞
知道答主
回答量:146
采纳率:0%
帮助的人:93.8万
展开全部
//禁用手机默认的触屏滚动行为
document.addEventListener('touchmove', function(event) {
event.preventDefault();
}, false);
//touchstart事件
function touchSatrtFunc(evt) {
try {
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等

var touch = evt.touches[0]; //获取第一个触点
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[0]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标


//document.getElementById("version").innerHTML = "原:"+startY+"   "+"现:"+y;
//判断滑动方向 上下

if (y - startY > 100) {
swipeDown();//你自己的方法 我是用来翻页的一样的
} else if(y - startY < -100){
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);
}
}
追问
touchmove事件无法获取坐标那怎么持续监听?
追答
可以啊,你可以输出到页面上看看,我做的是滑动翻页,所以是一段距离.
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式