JS移动端获取触控位置

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

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

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

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

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

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

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

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。

//禁用手机默认的触屏滚动行为
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);
	}
}