我是靠谱客的博主 机灵薯片,最近开发中收集的这篇文章主要介绍html5支持2指触摸吗,html5的触摸事件,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

1.触摸事件有哪些

touchstart,touchmove,touchend

2.分别什么时候触发

touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。

touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。

touchend事件:当手指从屏幕上离开的时候触发。

3.每个事件中的touch对象如何获得

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

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

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

最好统一使用一个touch对象数组

4.如何获得touch对象的相应属性

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

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

identifier:标识触摸的唯一ID。

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

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

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

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

target:触目的DOM节点目标。

5.举例子

function load (){

document.addEventListener('touchstart',touch, false);

document.addEventListener('touchmove',touch, false);

document.addEventListener('touchend',touch, false);

function touch (event){

var event = event || window.event;

var oInp = document.getElementById("inp");

switch(event.type){

case "touchstart":

oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";

break;

case "touchend":

oInp.innerHTML = "
Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";

break;

case "touchmove":

event.preventDefault();

oInp.innerHTML = "
Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";

break;

}

}

}

window.addEventListener('load',load, false);

最后

以上就是机灵薯片为你收集整理的html5支持2指触摸吗,html5的触摸事件的全部内容,希望文章能够帮你解决html5支持2指触摸吗,html5的触摸事件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(45)

评论列表共有 0 条评论

立即
投稿
返回
顶部