http://www.macdev.io/ebook/event.html OSX 用户交互 主要是鼠标键盘.

键鼠的活动会产生底层系统事件.

多点触摸

MDN 官网教程!!!  HTML5的触摸API支持处理单点和多点的触摸事件处理。

触摸接口

TouchEvent 代表一个触摸事件. 主要属性:

  • TouchEvent.changedTouches:一个TouchList对象。代表了所有上一个接触点到当前点状态发生变化的点。
    • TouchEvent.touches:一个TouchList对象。代表的所有当前触摸点,不管目标或者状态是否改变。
    • TouchEvent.type:触摸事件类型。有touchstart、touchend、touchmove、touchenter、touchleave和touchleave。

Touch 代表一个单独的触摸点 主要属性:Touch.identifier:这个触摸对象的唯一标识。

TouchList:代表一组触摸点。 比如同时有多根手指放在在屏幕上面。

DocumentTouch:包含创建Touch和TouchList对象的方法。

触摸事件

  1. touchstart:触摸的时候发生。
  2. touchend:手指从屏幕抬起时发生。手指划出了屏幕也会触发这个事件。
  3. touchmove:手指沿着屏幕滑动时触发。
  4. touchenter:触摸点进入到一个元素。
  5. touchleave:触摸点离开一个元素。
  6. touchcancel:当触摸受到干扰而中断时触发。 比如一个弹框,或者触摸点离开了文档窗口区域到了其他地方,或者触摸点超出了最大可支持的上限,那么最先的触摸将会退出。

触摸板事件

常用触摸事件:

touchstart 事件: 当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。 touchmove 事件: 当手指在屏幕上滑动的时候连续地触发。这个事件发生期间,调用preventDefault()事件可以阻止滚动。 touchend 事件: 当手指从屏幕上离开的时候触发。 touchcancel 事件:(用的少) 当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间,咱们只能去猜测了。

每个触摸事件的event对象都提供了在鼠标实践中常见的属性:

  • bubbles (起泡事件的类型)、
  • cancelable (是否用 preventDefault() 方法可以取消与事件关联的默认动作)、
  • clientX (返回当事件被触发时,鼠标指针的水平坐标)、
  • clientY (返回当事件触发时,鼠标指针的垂直坐标)、
  • screenX (当某个事件被触发时,鼠标指针的水平坐标)
  • screenY (返回当某个事件被触发时,鼠标指针的垂直坐标)。

触摸事件还包含下面三个用于跟踪触摸的属性。

  • touches:表示当前跟踪的触摸操作的touch对象的数组。
  • targetTouches:特定于事件目标的Touch对象的数组。
  • changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。

每个Touch对象包含的属性如下。   clientX:触摸目标在视口中的x坐标。   clientY:触摸目标在视口中的y坐标。   identifier:标识触摸的唯一ID。   pageX:触摸目标在页面中的x坐标。   pageY:触摸目标在页面中的y坐标。   screenX:触摸目标在屏幕中的x坐标。   screenY:触摸目标在屏幕中的y坐标。   target:触目的DOM节点目标

上面的属性光这么看,果然非常繁琐,每个属性说的都是那么的细致,只有真刀实枪的来点小例子才能更加明白其中的奥妙。所以小例子如下。

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 = "<br>Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";  
                break;  
            case "touchmove":  
                event.preventDefault();  
                oInp.innerHTML = "<br>Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";  
                break;  
        }  
           
    }  
}  
window.addEventListener('load',load, false);  

上面的小例子。当touchstart事件触发的时候,会将触摸的位置更新到div标签中。当touchmove事件触发的时候,会默认行为的滚动(触摸移动的默认行为是滚动页面),然后触摸操作的变化信息更新到div标签中。而touchend事件会输出有关触摸操作的最终信息。注意,在touchend事件触发的时候,touches集合中就没有任何Touch对象了,因为不存在活动的触摸操作。 这些事件会在文档的所有元素上面触发,因而可以分别操作页面的不同部分。在触摸屏幕上的元素,这些事件(包括鼠标事件)发生的顺序如下:   (1)touchstart (2)mouseover (3)mousemove(一次) (4)mousedown (5)mouseup (6)click (7)touchend   介绍了这么多,这些触摸事件的兼容情况怎么样呢?支持触摸事件(touchstart、touchmove和touchend)的浏览器有:iOs版Safari、Android版WebKit、bada版Dolfin、OS6+中的BlackBerry WebKit、Opera Mobile 10.1+和LG专有OS中的Phantom浏览器。目前只有iOs版Safari支持多点触摸。PC版Firefox 6+ 和Chrome也支持触摸事件。 HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)就为大家介绍到这里了,今天主要为大家介绍了些浏览器兼容支持的情况还不错的触摸事件。日后若有兼容不错的事件,再继续介绍。更多有关HTML5实战与剖析的相关知识,敬请关注梦龙小站的相关更新。

touch event. 简书 参考资源

• touchstart
当手指放在屏幕上触发。 • touchmove
当手指在屏幕上滑动时,连续地触发。 • touchend
当手指从屏幕上离开时触发。 • touchcancel
当系统停止跟踪时触发,系统什么时候取消,文档没有明确的说明。
【总】以上四个,是w3c提供的触摸事件,只针对触摸设备,最常用的是前三

当一个手指在触屏上时,event.touches.length=1, 当两个手指在触屏上时,event.touches.length=2,

触摸事件与手势事件之间的关系

1、当一个手指放在屏幕上时,会触发touchstart事件,如果另一个手指又放在了屏幕上,则会触发gesturestart事件,随后触发基于该手指的touchstart事件。
2、如果一个或两个手指在屏幕上滑动,将会触发gesturechange事件,但只要有一个手指移开,则会触发gestureend事件,紧接着又会触发toucheend事件。

手机用的/mac 触摸板也能用./ win的触摸板…..

1.触摸事件

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

  • touchstart: 当手指触摸屏幕时触发;即使已经有一个手指放在了屏幕上也会触发。
    • touchmove: 当手指在屏幕上滑动时连续的触发。在这个事件发生期间,调用preventDefault()可阻止滚动。
    • touchend: 当手指从屏幕上移开时触发。
    • touchcancel:当系统停止跟踪触摸时触发。关于此事件的确切触发事件,文档中没有明确说明。

上面这几个事件都会冒泡,也都可以取消。

因此,每个触摸事件的event对象都提供了在鼠标事件中常见的属性:bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey和metaKey。

除了常见的DOM属性外,触摸事件还包含下列三个用于跟踪触摸的属性。 • touches: 表示当前跟踪的触摸操作的Touch对象的数组。 • targetTouches:特定于事件目标的Touch对象的数组。 • changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。

每个Touch对象包含下列属性。 • clientX:触摸目标在视口中的X坐标。 • clientY:触摸目标在视口中的Y坐标。 • identifier:表示触摸的唯一ID。 • pageX:触摸目标在页面中的x坐标。 • pageY:触摸目标在页面中的y坐标。 • screenX:触摸目标在屏幕中的x坐标。 • screenY:触摸目标在屏幕中的y坐标。 • target:触摸的DOM节点坐标。 使用这些属性可以跟踪用户对屏幕触摸操作。来看下面的例子。

2.手势事件

IOS 2.0中的Safari还引入了一组手势事件。 当两个手指触摸屏幕时就会产生手势,手势通常会改变显示项的大小,或者旋转显示项。有三个手势事件,分别如下。 • gesturestart:当一个手指已经按在屏幕上面另一个手指有触摸屏幕时触发。 • gesturechange:当触摸屏幕的任何一个手指的位置发生变化时触发。 • gestureend:当任何一个手指从屏幕上面移开时触发。

只有两个手指都触摸到事件的接收容器时才会触发这些事件。在一个元素上设置事件处理程序,意味着两个手指必须同时位于该元素的范围之内,才能触发手势事件(这个元素就是目标)。由于这些事件冒泡,所以将事件处理程序放在文档上也可以处理所有手势事件。此时,事件的目标就是两个手指都位于其范围内的那个元素。 触摸事件和手势事件之间存在某种关系。当一个手指放在屏幕上时,会触发touchstart事件。如果另一个手指又放在了屏幕上,则会先触发gesturestart事件。如果另一个手指又放在了屏幕上,则会先触发gesturestart事件,随后触发基于该手指的touchstart事件。如果一个或两个手指在屏幕上滑动,将会触发gesturechange事件,但只要有一个手指移开,就会触发gestureend事件,紧接着又会触发基于该手指的touchend事件。 与触摸事件一样,每个手势事件的event对象都包含着标准的鼠标事件属性:bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey和metaKey。此外,还包含两个额外的属性:rotation和scale。其中,rotation属性表示手指变化引起的旋转角度,负值表示逆时针旋转,正值表示顺时针旋转(该值从0开始)。而scale属性表示两个手指间距的变化情况(例如向内收缩会缩短距离);这个值从1开始,并随距离拉大而增长,随距离缩减而减小。

触控板事件 一般都是三个事件 结合起来用的

如: 如何 不偏移 地拖拽一个元素?

你要使得touchmove的时候是从你开始触摸的位置开始算,那么你就需要先捕捉touchstart的时候的pageX值存起来,

var startX;
obj.addEventListener('touchstart',ts,false);
function ts(ev){
  var touches = ev.touches[0],
      startX = touches.pageX;
}

接下来你操作touchmove事件就需要拿上面的startX作为起始值。 关于第二个问题,要获取touchend事件的pageX值是利用changedTouches来拿到的,示例代码如下:

obj.addEventListener('touchsend',te,false);
function te(ev){
  var touches = ev.changedTouches[0],
      startX = touches.pageX;
}

鼠标事件

onClick 单击 onDblClick 双击 onMouseDown 按下 onMouseUp 松开 onMouseOver 上方 onMouseMove 移动