JS移动端获取触控位置

Posted 2023-04-17

想在touchmove事件里监听手指按下的坐标，event.pageX获取的是undefined，changedTouches，targetTouches，touches也只获得到了鼠标按下时的坐标，没法持续监听，求帮助！或者其他办法也行，效果大概是一个元素，手指在上面滑动，然后改变这个元素的top之类的，这个改变是在手指滑动的过程中变化的。

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

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

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

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

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

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

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

参考技术A

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。

参考技术B //禁用手机默认的触屏滚动行为
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事件无法获取坐标那怎么持续监听？

追答

可以啊,你可以输出到页面上看看,我做的是滑动翻页,所以是一段距离.

本回答被提问者和网友采纳

js实现拖拽兼容pc端和手机端

pc端拖动时候用到的三个事件：mousedown、mousemove、mouseup

在移动端与之相对应的分别是：touchstart、touchmove、touchend事件。

还有一点要注意的是在PC端获取当前鼠标的坐标是：event.clientX和event.clientY，

在移动端获取坐标位置则是：event.touches[0].clientX和event.touches[0].clientY

//判断当前是touch还是click
var touch;
if(event.touches) {
    touch = event.touches[0];
} else {
    touch = event;
}

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>适配移动端和pc端的拖动效果</title>
		<style>
			#div2 {
				position: relative;
				top: 0;
				left: 0;
				width: 100px;
				height: 100px;
				background: #bbbbbb;
				touch-action: none;
			}
		</style>
	</head>

	<body>
		<div id="div2"></div>

		<script>
			//是否拖动
			var flag = false;
			//
			var cur = {
				x: 0,
				y: 0
			}
			var nx, ny, dx, dy, x, y;

			function down() {
				flag = true;
				var touch;
				if(event.touches) {
					touch = event.touches[0];
				} else {
					touch = event;
				}
				cur.x = touch.clientX;
				cur.y = touch.clientY;
				dx = div2.offsetLeft;
				dy = div2.offsetTop;
			}

			function move() {
				if(flag) {
					var touch;
					if(event.touches) {
						touch = event.touches[0];
					} else {
						touch = event;
					}
					nx = touch.clientX - cur.x;
					ny = touch.clientY - cur.y;
					x = dx + nx;
					y = dy + ny;
					div2.style.left = x + "px";
					div2.style.top = y + "px";
					//阻止页面的滑动默认事件
					document.addEventListener("touchmove", function() {
						event.preventDefault();
					}, false);
				}
			}
			//鼠标释放时候的函数
			function end() {
				flag = false;
			}
			var div2 = document.getElementById("div2");
			div2.addEventListener("mousedown", function() {
				down();
			}, false);
			div2.addEventListener("touchstart", function() {
				down();
			}, false)
			div2.addEventListener("mousemove", function() {
				move();
			}, false);
			div2.addEventListener("touchmove", function() {
				move();
			}, false)
			document.body.addEventListener("mouseup", function() {
				end();
			}, false);
			div2.addEventListener("touchend", function() {
				end();
			}, false);
		</script>
	</body>

</html>