(97)Wangdao.com_第三十天_触摸事件

时间 2019-11-08

标签 wangdao.com wangdao com 第三十天 10天触摸事件繁體版

原文原文链接

触摸事件canvas

只有触摸屏才会引起这一类事件数组

触摸事件和鼠标事件同时触发，即便这个时候并无用到鼠标。浏览器

这是为了让那些只定义鼠标事件、没有定义触摸事件的代码，在触摸屏的状况下仍然能用。ide

若是想避免这种状况，能够用 event.preventDefault 方法阻止发出鼠标事件函数

Touch 一个触摸点spa

TouchList 多个触摸点的集合code

TouchEvent 触摸引起的事件实例orm

var touch = new Touch(touchOptions)
配置对象可选值

identifier 必需   整数   触摸点的惟一 ID。
target   必需   元素节点   触摸点开始时所在的网页元素。
clientX   可选   数值   触摸点相对于浏览器窗口左上角的水平距离，默认为0。
clientY   可选   数值   触摸点相对于浏览器窗口左上角的垂直距离，默认为0。
screenX   可选   数值   触摸点相对于屏幕左上角的水平距离，默认为0。
screenY   可选   数值   触摸点相对于屏幕左上角的垂直距离，默认为0。
pageX   可选   数值   触摸点相对于网页左上角的水平位置（即包括页面的滚动距离），默认为0。
pageY   可选   数值   触摸点相对于网页左上角的垂直位置（即包括页面的滚动距离），默认为0。
radiusX   可选   数值   触摸点周围受到影响的椭圆范围的 X 轴半径，默认为0。
radiusY   可选   数值   触摸点周围受到影响的椭圆范围的 Y 轴半径，默认为0。
rotationAngle   可选   数值   触摸区域的椭圆的旋转角度，单位为度数，在0到90度之间，默认值为0。
force   可选   数值   范围在0到1之间   表示触摸压力   0表明没有压力，1表明硬件所能识别的最大压力，默认为 0对象

Touch 接口的实例属性 var touch = e.changedTouches.item(0);

touch.identifier blog

返回一个整数，表示触摸点的惟一 ID。

这个值在整个触摸过程保持不变，直到触摸事件结束。

touch.force

返回一个0到1之间的数值，表示触摸压力。

0表明没有压力，1表明硬件所能识别的最大压力。

touch.target

返回一个元素节点，表明触摸发生时所在的那个元素节点。

即便触摸点已经离开了这个节点，该属性依然不变。

touch.screenX，touch.screenY

至关于屏幕左上角

touch.clientX，touch.clientY

至关于浏览器窗口左上角

touch.pageX，touch.pageY

至关于整个网页左上角

touch.radiusX，touch.radiusY

返回触摸点周围受到影响的椭圆范围的 X 轴半径和 Y 轴半径，单位为像素。

乘以 2 就能够获得触摸范围的宽度和高度

touch.rotationAngle

表示触摸区域的椭圆的旋转角度，单位为度数，在0到90度之间

精准描述手指触屏的椭圆区域

div.addEventListener('touchstart', rotate);
div.addEventListener('touchmove', rotate);
div.addEventListener('touchend', rotate);

function rotate(e) {
    var touch = e.changedTouches.item(0);
    e.preventDefault();

    src.style.width = touch.radiusX * 2 + 'px';
    src.style.height = touch.radiusY * 2 + 'px';
    src.style.transform = 'rotate(' + touch.rotationAngle + 'deg)';
};

TouchList 接口

表示一组触摸点的集合。表示全部触摸点

它的实例是一个相似数组的对象，成员是 Touch 的实例对象

用户用三根手指触摸，产生的 TouchList 实例就会包含三个成员，每根手指的触摸点对应一个 Touch 实例对象

主要经过触摸事件的 event.touches、event.changedTouches、event.targetTouches 这几个属性获取

实例属性

event.touches.length

触摸点的数量

实例方法

event.touches.item() 指定位置的成员，它的参数是该成员的位置编号（从零开始）

event.touches.item(0); 等同于 event.touches[0];

浏览器原生提供 TouchEvent() 构造函数，用来生成触摸事件的实例。除了被继承的属性之外，它还有一些本身的属性。
var touchEvent = new TouchEvent(type, options);

第一个参数是字符串，表示事件类型；

第二个参数是事件的配置对象，该参数是可选的，对象的全部属性也是可选的。

除了 Event 接口的配置属性，该接口还有一些本身的配置属性。

touches TouchList 实例表明屏幕上全部的的手指列表，默认值是一个空数组[]。

targetTouches TouchList 实例表明全部处在目标元素上的手指列表，默认值是一个空数组[]。

changedTouches TouchList 实例表明全部处目标元素目标事件上的手指列表 ，默认值是一个空数组[]。

ctrlKey 布尔值表示 Ctrl 键是否同时按下，默认值为false。

shiftKey 布尔值表示 Shift 键是否同时按下，默认值为false。

altKey 布尔值表示 Alt 键是否同时按下，默认值为false。

metaKey 布尔值表示 Meta 键（或 Windows 键）是否同时按下，默认值为false。

触摸事件的种类 event.type

touchstart

用户开始触摸时触发，它的target属性返回发生触摸的元素节点。

touchend

用户再也不接触触摸屏时（或者移出屏幕边缘时）触发

它的 target 属性与 touchstart 事件一致的，就是开始触摸时所在的元素节点。

它的 changedTouches 属性返回一个 TouchList 实例，包含全部再也不触摸的触摸点（即 Touch 实例对象）。

touchmove

用户移动触摸点时触发，

它的 target 属性与 touchstart 事件一致。

若是触摸的半径、角度、力度发生变化，也会触发该事件。

touchcancel

触摸点取消时触发

好比在触摸区域跳出一个模态窗口（modal window）、

触摸点离开了文档区域（进入浏览器菜单栏）、

用户的触摸点太多，超过了支持的上限（自动取消早先的触摸点）。

var el = document.getElementsByTagName('canvas')[0];
el.addEventListener('touchstart', handleStart, false);
el.addEventListener('touchmove', handleMove, false);

function handleStart(evt) {
    evt.preventDefault();
    var touches = evt.changedTouches;
    for (var i = 0; i < touches.length; i++) {
        console.log(touches[i].pageX, touches[i].pageY);
    };
};

function handleMove(evt) {
    evt.preventDefault();
    var touches = evt.changedTouches;
    for (var i = 0; i < touches.length; i++) {
        var touch = touches[i];
        console.log(touch.pageX, touch.pageY);
    };
};