手机端如何用JS实现触屏

JavaScript014

手机端如何用JS实现触屏,第1张

//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)

}

}

写代码有些麻烦,给个关键建议。你大概是在拖动页面上遇到麻烦吧!要实现在触控设备上手指拖动元素,不能用mousemove哟,这个是没用的,要用到touchstart(手指接触触摸屏),touchmove(手指在触摸屏上移动),touchend(手指离开触摸屏)。touchmove调用的函数里最好填上event.preventDefault() 否则有些浏览器对touchmove也不管用哟!这个还可以开发多点触控,你自己去研究吧!

有关触摸事件参考这里: http://zm10.sm.cn/?src=http%3A%2F%2Fwww.2cto.com%2Fkf%2F201401%2F272575.html&uid=374119f2442b2126e94b23ef1419d180&hid=6b989aa1182219e3e0883131a232b00a&pos=2&cid=9&pi=&di=&time=1412014181458&from=click&restype=1&pagetype=0000000000000402