手机端如何用JS实现触屏

JavaScript012

手机端如何用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)

}

}

1、jquery 监听页面滚动使用的方法:.scroll()。

2、新建一个HTML文档,定义<body>的高度。

3、创建JS脚本,使用.scroll() 方法监听页面滚动。

4、如果页面发生滚动,则执行函数,弹出一个hello。

5、保存文件,查看.scroll()监听页面滚动的效果。

如果您使用的是华为手机,手机出现了触摸屏失灵的问题,您可以按照以下方法进行排查:

1,如果您使用手机的环境温度过低,可能会出现触摸屏不灵敏问题,这是受屏幕器件本身的物理特性影响,建议您尽量保持手机/平板在0℃-35℃环境温度下使用。

2. 如果您手机屏幕有脏污或有水渍,可能会影响屏幕触摸灵敏度。建议您将屏幕擦拭干净后尝试;

3,如果屏幕有贴膜,可能是由于保护膜过厚,影响屏幕触摸灵敏度。建议您更换较薄的第三方保护膜或前往华为客户服务中心更换官方保护膜.

4,如果您的手机正常使用过程中突然局部或整个屏屏幕点击无响应,卡顿现象,请同时按开机键和音量上键启动录屏功能,再进行点击手机操作,若屏幕上手指点击滑动位置有白色圆圈报点,那说明手机触摸屏工作正常;如果未启动录屏功能,请长按“开机键”10s以上,将手机强制重启尝试,故障不复现,则现象非触摸屏问题。

5,如果以上方法仍无法解决您的问题,建议您提前备份好重要数据(QQ,微信等第三方应用需单独备份),携带手机、标配充电器、数据线及相关购机凭证到附近的华为客户服务中心检测。

相关链接如下:    客户服务中心寄修服务预约服务维修备件价格查询