JS移动端获取触控位置
发布网友
发布时间：2022-04-19 23:02
共3个回答
热心网友
时间：2022-04-20 00:32
1、如图位置是一个html中的可编辑内容的div标签，在里边输入文字，会有一个光标。
2、通过getSelection可以获得一个Selection对象，如图。因为是一个光标，anchor和focus（选择的起点和终点）一样，偏移也一样。
3、如图，则进行文字选择，而且是跨行选择，以第一行为起点，第二行为终点，选择文字。
4、再次getSelection，可以看到anchorNode是起始节点，anchorOffset是起始偏移，focus是结束的。
5、如果从第二行倒着选到第一行，使用getSelection获取选择区域，可以看到anchorNode和focusNode和刚才相比，互换了。
6、使用一个node的textContent属性可以获得文字。结合focusOffset和anchorOffset，实际上可以获取光标/选中区域前后的文字。
7、将起始和结束位置设置为相同，而且都在结束节点的末尾。即变成闪烁光标。
热心网友
时间：2022-04-20 01:50
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。
热心网友
时间：2022-04-20 03:24
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事件无法获取坐标那怎么持续监听？
追答可以啊,你可以输出到页面上看看,我做的是滑动翻页,所以是一段距离.
