html5界面程序 html5界面程序设计

转载

mob64ca141a683a 2023-10-17 18:38:45

文章标签 html5界面程序 html5 触摸界面触摸事件数组 文章分类 HTML5 移动开发

在移动端屏幕中，我们需要做的不只是和处理PC端网页那样，处理简单的点击事件或者其他桌面事件。我们需要更多的了解一下移动端的触摸事件和手势。——整理自《HTML5触摸界面设计与开发》

基于webkit 引擎的浏览器

webkit 是一个非常强大的引擎，也是第一代iphone获得成功的一个原因。webkit 起源于名为Konqueror的开源浏览器引擎，苹果将它开发为webkit，作为safari背后的浏览器引擎。现在的 ios ，android平台上的浏览器都是基于webkit引擎来实现的

windows版的浏览器

作为windows phone手机的浏览器引擎肯定是IE了，与webkit功能相近，但IE10有着不同的触摸事件API，但是实现的功能都是相同的。现在IE几乎都兼容了当前的

轻触和单击的不同

在pc端机基于鼠标的界面互动是单击，那么在触摸界面上的基本交互方式就是轻触，最初，轻触和单击相仿，但是轻触与单击完全不同。在触屏设备的浏览器中，仍然可以触发鼠标事件。当一个用户轻触一个元素，但不降手指留在屏幕上，轻触300ms之后将触发click事件。同时触发的还有mouseup和mousedown事件，我们不考虑这些桌面事件，我们只说一下触屏事件。

总的来说在移动端有四种类型的触摸事件

触摸开始 (手势放在屏幕上的时候)
接触点移动 (手指在屏幕上移动且手指不离开屏幕)
触摸结束 (用户手指离开屏幕)
触摸被取消 (触摸被中断了，比如突然短息或电话来了)

webkit内的触摸事件

touchstart 触摸开始包含touches数组
touchmove 触摸点移动包含touches数组
touchend 触摸结束包含touches数组
touchcancel 触摸取消不包含touches数组

备注：touches数组是一组触摸事件所产生的触摸对象，代表着触摸屏幕的手指

触摸对象的属性

identifier 是这个触摸的唯一表示符，用户的手指保持在屏幕上，这个值不会改变
screenX 触摸的X的位置，相对移动设备屏幕左侧，无论是否滚动
screenY 触摸Y的位置，相对于屏幕顶部
clientX 触摸相对于浏览器窗口左侧的X位置，一般和screenX一样
clientY 触摸相对浏览器窗口的顶部位置；相当于screenY减去卷去的上部
pageX 触摸相对所呈现的页面左侧的X的位置
pageY 触摸相对所呈现顶部的Y的位置
target 触摸开始时接触点下的元素对象，如果触摸移动到其他位置，值不变，还是原来的
radius[X/Y] 接触点的半径(与屏幕接触的区域大小的估计值)
rotationAngle 半径中所述的椭圆被旋转到与接触区域最匹配需要旋转的角度
force 施加在表面上的力度
备注： radius、rotationAngle和farce在android上的chrome浏览器需要前缀(如：webkitForce) 这三个属性在IOS6中不被支持

IE10和指针事件

在IE10上有个单独的，被称为指针的事件，一般由鼠标单击，电子笔轻触，手指触摸着三种形式触发
IE10的指针事件

MSPointerDown 触摸开始
MSPointerMove 触摸移动
MSPointerUp 触摸结束
MSPointerOver 触摸点移动到元素之上
MSPoinerOut 触摸点离开元素
事件对象(MSPointerEvent)继承于MouseEvent,并且包含page[X|Y]、client[X|Y]和device[X|Y]属性。同时也包含额外的指针属性

MSPointerEvent属性

hwTimestamp 创建事件的时间
isPrimary 指示该指针是否为主指针
pointerId 指针唯一ID(类似触摸事件的标识符)
pointerType 一个整数，标识了改事件来自鼠标、手写或者是手指
pressure 笔的压力，从0 - 255
rotation 从0 - 359 光标的旋转度，如果支持的话
tilt[X|Y] 手写笔的倾斜度

简单看一下touch事件

首先，准备好运行环境，我们用浏览器的开发者工具来模拟，这里我们用到的是chrome的模拟环境，目前只要是非IE,FF的浏览器默认都是以ctrl+shift+i 的方式就打开了开发者工具调试环境，点击小手机的图标，我们进入了手机模拟环境，我们可以选择进一步设置或者不设置其他的模拟方案，一般我们选择iphone 4,因为这个尺寸不管在中等显示器还是笔记本都很好。

我们在这里写一个公共需要用到的代码，就是header里面的内容，以后举例就不必重写了：

<head>
	<meta charset='UTF-8'>
	<meta http-equiv='X-UA-Comatible' content='IE=edge,chrome=1'>
	<meta name='viewport' content='width=device-width, user-scalable=no, initial-scale=1.0'>
	<title>触屏事件</title>
</head>

好的，下面我们来简单看一下这几个针对webkit引擎的触屏事件：

css 结构：

*{margin:0;padding:0;}
.square{width: 100px;height: 100px;background-color: pink;}
.square.start{background-color: purple;}
.square.move{background-color: green;}
.square.end{background-color: red;}

html 结构

<div class='square'>touch me</div>

javascript 结构：

var square = document.querySelector('.square');
// 开始触摸
square.addEventListener('touchstart',function(e){
    e.preventDefault(); // 阻止默认事件
    this.className = 'square start';
},false);
// 手指滑动
square.addEventListener('touchmove',function(e){
    e.preventDefault();
    this.className = 'square move';
},false);
// 手指离开
square.addEventListener('touchend',function(e){
    e.preventDefault();
    this.className = 'square end';
},false);

上面简单的模拟了touchstart touchmove touchend 这三个事件，而touchcancel事件我们不去模拟它，不是很经常能用到。当手指从触摸到滑动到离开屏幕，你会看到屏幕上的那个div的颜色块会随着不同事件的触发而改变颜色。由此我们就可以用它来写一些案例了，比如移动端的轮播图，但是这样编程起来会比较麻烦，我们可以基于这几个事件来封装一下手势，至于手势的封装，我们以后再来说。