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、将起始和结束位置设置为相同,而且都在结束节点的末尾。即变成闪烁光标。
2024-11-22 广告
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);
}
}
touchmove事件无法获取坐标那怎么持续监听?
可以啊,你可以输出到页面上看看,我做的是滑动翻页,所以是一段距离.