html5构建触屏网站之touch事件介绍

针对“html5构建触屏网站之touch事件介绍”的完整攻略，我将从以下几个方面进行详细讲解：

1. Touch事件介绍
2. Touch事件类型
3. Touch事件属性
4. 示例说明

1. Touch事件介绍

在html5中，为了支持触屏设备，引入了Touch事件。 Touch事件是一种与鼠标和键盘事件相对应的一种输入方式，用于描述在触摸屏上手势的各种行为，例如单指单击、双指缩放等。

2. Touch事件类型

Touch事件包括以下几种类型：

• touchstart: 当手指触摸时触发；
• touchmove: 当手指在屏幕上滑动时连续触发；
• touchend: 当手指离开屏幕时触发；
• touchcancel: 系统取消touch事件的触发；

3. Touch事件属性

在Touch事件中，我们可以通过event对象获取到以下几种属性值：

• touches：其为一个数组对象，包含当前屏幕上所有与当前事件相关手指的信息。
• targetTouches：也为一个数组对象，包含当前事件在DOM结构中与当前目标元素相关的手指的信息。
• changedTouches：其为一个数组对象，包含当前事件涉及到的手指的信息，即新增的手指则存放在这个数组中。

需要注意的是，在不加以处理的情况下，Touches, targetTouches, changedTouches 数组将会保留不变，因此，在处理Touch事件时，需要留意数组状态。

4. 示例说明

下面，我们通过两个示例说明Touch事件的使用：

示例1：实现一个滑动条

HTML代码：

<div id="slider"></div>

JavaScript代码：

var slider = document.getElementById("slider");

slider.addEventListener("touchstart", function(e) {
  var touch = e.changedTouches[0];
  var posX = touch.clientX - slider.offsetLeft;

  slider.addEventListener("touchmove", function(e) {
    e.preventDefault();

    var touch = e.changedTouches[0];
    var x = touch.clientX - posX;

    if (x >= 0 && x <= slider.parentNode.clientWidth - slider.offsetWidth) {
      slider.style.left = x + "px";
    }
  }, false);

  slider.addEventListener("touchend", function(e) {
    slider.removeEventListener("touchmove", arguments.callee, false);
  }, false);
}, false);

说明：

上述代码中，我们实现了一个具有Move事件的滑动条，当我们触碰屏幕后，开始滑动时，根据Touch事件更新slider的位置，当我们离开屏幕后，Move事件停止，滑动条停止滑动。

示例2：实现双指缩放

HTML代码：

<div id="image-container">
   <img src="img.jpg" alt="Image"/>
</div>

JavaScript代码：

var scale = 1;
var imageContainer = document.getElementById("image-container");

imageContainer.addEventListener("touchstart", function(e) {
  if (e.touches.length == 2) {
    var x1 = e.touches[0].clientX;
    var x2 = e.touches[1].clientX;
    var y1 = e.touches[0].clientY;
    var y2 = e.touches[1].clientY;

    var distance = Math.sqrt(Math.pow(x1-x2,2) + Math.pow(y1-y2,2));
    scale = distance / imageContainer.offsetWidth;
  }

}, false);

imageContainer.addEventListener("touchmove", function(e) {
  if (e.touches.length == 2) {
    var x1 = e.touches[0].clientX;
    var x2 = e.touches[1].clientX;
    var y1 = e.touches[0].clientY;
    var y2 = e.touches[1].clientY;

    var distance = Math.sqrt(Math.pow(x1-x2,2) + Math.pow(y1-y2,2));
    imageContainer.style.transform = "scale(" + (distance / (scale * imageContainer.offsetWidth)) + ")";
  }
});

imageContainer.addEventListener("touchend", function() {
  scale = 1;
  imageContainer.style.transform = "scale(" + scale + ")";
});

说明：

上述代码中，我们实现了一个双指缩放图片的效果，当我们触碰屏幕后，手指数为2时，根据Touch事件计算出当前双指的距离，用于后续计算缩放比例；当我们移动双指时，根据Touch事件计算实时的距离，并更新图片的缩放比例，当我们双指离开屏幕时，复位图片的缩放比例。