JS触摸事件

JavaScript021

JS触摸事件,第1张

在头部加上这个,防止双击的时候浏览器放大

当手指放在屏幕上触发。

当手指在屏幕上滑动时,连续地触发。

当手指从屏幕上离开时触发。

当系统停止跟踪时触发,系统什么时候取消,

由于触摸会导致屏幕动来动去,所以可以会在这些事件的事件处理函数内使用 event.preventDefault()

,来阻止屏幕的默认滚动。

touches:表示当前跟踪的触摸操作的touch对象的数组。

当一个手指在触屏上时,event.touches.length=1,

当两个手指在触屏上时,event.touches.length=2,以此类推。

targetTouches:特定于事件目标的touch对象数组。

因为touch事件是会冒泡的,所以利用这个属性指出目标对象。

changedTouches:表示自上次触摸以来发生了什么改变的touch对象的数组。

每个touch对象都包含下列几个属性:

clientX:触摸目标在视口中的x坐标。

clientY:触摸目标在视口中的y坐标。

identifier:标识触摸的唯一ID。

pageX:触摸目标在页面中的x坐标。

pageY:触摸目标在页面中的y坐标。

screenX:触摸目标在屏幕中的x坐标。

screenY:触摸目标在屏幕中的y坐标。

target:触摸的DOM节点目标。

最近在做一个移动端的项目,其中有一个收藏列表,其中包含几个事件。

1.点击跳转详情页。

2.长按显示遮罩层和删除按钮

3.点击删除按钮,删除此项。

下面会详细介绍我处理此问题时所出现的问题,及处理方法(本文基于jQuery)

首先我对列表添加了长按事件,添加完之后,发现我的长按事件已经可以成功执行了。但是却出现了新的问题:

这个问题好处理,只需添加一个变量,来判断是否为长按事件

这样上面的问题就完美解决了。

接下来就是给遮罩层上的删除按钮添加事件

但是在这里就发现了新的问题

所以就需要一个新的事件来覆盖原本的事件

然后,整个点击跳转,长按显示删除,删除事件,就已经完美解决了。

但是,在移动端查看的时候就会发现正常的滚动事件被preventDefault屏蔽了。

此处有两种解决方式:

1.删除 e.preventDefault()

删除preventDefault有可能会出现其它情况,不过我暂时没发现如果出现其它情况,可使用下面的方法

删除的点击事件也是如此

By : Yimi-shan

//html5 新增 touch 事件

//禁用手机默认的触屏滚动行为

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)

}

}