本文来自《JavaScript高级程序设计》阅读笔记
iOS版Safari新增了一些专有事件,因为iOS设备没有鼠标和键盘。
1、触摸事件:
- touchstart 当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发
- touchmove 当手指在屏幕上滑动时候连续触发,可以用preventDefault阻止
- touchend 当手指从屏幕上移开时候触发
- touchcancle 当系统停止跟踪触摸时候触发
2、
属性:
每一个触摸事件的event对象常见属性:
- bubbles
- cancelable
- view
- clientX
- clientY
- screenX
- screenY
- detail
- altKey
- shiftKey
- ctrlKey
- metaKey
还包含3个用于
跟踪触摸的属性:
- touches 当前跟踪的触摸操作的Touch对象的数组
- targetTouchs 特定于事件目标的Touch对象的数组
- changeTouches 自上次触摸以来发生了什么改变的Touch对象的数组
每一个
Touch对象包含下列属性:
- clientX触摸目标在视口中的x坐标
- clientY触摸目标在视口中的y坐标
- pageX触摸目标在页面中的x坐标
- pageY触摸目标在页面中的y坐标
- screenX触摸目标在屏幕中的x坐标
- screenY触摸目标在屏幕中的y坐标
- target触摸的DOM节点目标
- identifier标识触摸的唯一ID
实例代码:
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+")"; case "touchend": output.innerHTML = "Touch ended (" + event.changedTouches[0].clientX + ","+event.changedTouches[0].clientY+")"; case "touchmove": event.preventDefault(); output.innerHTML = "Touch moved (" + event.changedTouches[0].clientX + ","+event.changedTouches[0].clientY+")"; } } }
触摸事件的
顺序:
- touchstart
- mouseover
- mouseover(一次)
- mousedown
- mouseup
- click
- touchend
浏览器支持:
- iOS Safari
- Android版Webkit
- LG专有的OS中的Phantom