Javascript高级编程学习笔记（69）—— 事件（13）触摸与手势事件

时间：2024-07-16 14:07:38

触摸与手势事件

由于移动设备既没有鼠标也没有键盘，所以在为移动浏览器开发交互性网页时，常规的鼠标键盘事件根本不够用

所以早期的苹果为Safari 添加了一些与触摸相关的事件

随着后面Android的Webkit的加入，让这些触摸事件成为了许多的事实标准

基于此，W3C开始制定了 Touch Event 规范

所以下面介绍的事件只针对移动设备

触摸事件

触摸事件会在用户手指放在屏幕上面时、在屏幕上滑动、从屏幕上移开时触发

具体来说由以下几个触摸事件：

  • touchstart：当手指触摸屏幕时触发（即使这时已有手指放在屏幕上）
  • touchmove：手指在屏幕上滑动时连续触发
  • touchend：手指从屏幕上移开时触发
  • touchcancel：当系统停止跟踪触摸时触发（关于该事件的准确触发时间，文档中并没有给出明确说明）

以上事件都会冒泡，也都可以取消

虽然这些触摸事件在DOM规范中并没有定义，但是这些事件都是以兼容DOM的方式实现的

因此，这些触摸事件的event对象都提供了在鼠标事件中的常见属性：

  • bubbles
  • cancelable
  • view
  • clientX
  • clientY
  • screenX
  • scrennY
  • detail
  • altKey
  • shiftKey
  • ctrlKey
  • metaKey

除了上方常见的DOM属性之外，触摸事件还包含下列三个用于跟踪触摸的属性：

  1. touches：表示当前跟踪的触摸操作的Touch对象的数组
  2. targetTouches：特定于事件目标的Touch对象数组
  3. changeTouches：表示自上一次触摸以来发生了什么改变的Touch对象的数组

上面提到的Touch对象包含下列属性：

  • clientX：触摸目标在视口中的x坐标
  • clientY：触摸目标在视口中的y坐标
  • identifier：标识触摸的唯一ID
  • pageX：触摸目标在页面中的X坐标
  • pageY：触摸目标在页面中的y坐标
  • screen X：触摸目标在屏幕中的X坐标
  • screenY：触摸目标在屏幕中y坐标
  • target：触摸的DOM节点目标

以下方代码为例：

function handleTouchEvent(event){

    if(event.touches.length ===1){//只跟踪一次触摸

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

        switch(event.type){

            case "touchstart":

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

                break;

            case "touchend":

                output.innerHTML = "<br>Touch ended ("+ event.touches[0].clientX +","+event.touches[0].clientY +")";

                break;

            case "touchmove":

                event.preventDefault();//touchmove 的默认行为是滚动屏幕所以需要阻止该事件的默认行为

                output.innerHTML =  "<br>Touch moved ("+ event.touches[0].clientX +","+event.touches[0].clientY +")";

                break;

        }

    }

}

上方给出了一个用于打印触摸事件信息的事件处理程序

此外，这些事件会在文档的所有元素上触发

在触摸屏上操作元素时，事件的发生顺序如下：

  1. touchstart
  2. mouseover
  3. mousemove（只触发一次）
  4. mousedown
  5. mouseup
  6. click
  7. touched

所以在对移动设备进行交互时，使用触摸事件能带来比鼠标事件更加良好的用户体验

手势事件

IOS2.0中的Safari还引入了一组手势事件

当两个手指触摸屏幕时就会产生手势，手势通常会改变显示项的大小、或者旋转显示项

有如下三个手势事件：

  1. gesturestart：当一个手指放在屏幕上另一个手指又触摸屏幕触发
  2. gesturechange：当触摸屏幕的任何一个手指的位置发生改变时触发
  3. getureend：当任何一个手指从屏幕上移开时触发

只有当两个手指都处于绑定事件处理程序的元素的范围内时才会触发手势事件

由于这些事件都冒泡，所以将事件处理程序放在文档上也可以处理所有的手势事件

除了DOM事件event对象所包含的属性外，手势事件拥有以下额外属性：

  • rotation：表示手指变化引起的旋转角度（负值逆时针旋转，正值顺时针旋转）
  • scale：表示两个手指间距离的变化情况，该值从1开始随距离拉大而增加，距离缩短而减小

需要注意的是，触摸事件也拥有以上两个属性，但是触摸事件的这两个属性只有在两个手指保持接触时才会发生变化

相关文章