《JavaScript高级程序设计》触摸事件
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
本文来自《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
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |