touch

touch

w3c规范草案: touch事件 https://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html

touch接口:
定义了一个touch事件touch的点(touch point)是一个touch对象,touchList对象是一个固定的对象,一旦它被创建了,它的内容不会在发生变化
包括这些只读的属性,identifier,target,clientX...
interface Touch {
    readonly        attribute long        identifier;
    readonly        attribute EventTarget target;
    readonly        attribute double      screenX;
    readonly        attribute double      screenY;
    readonly        attribute double      clientX;
    readonly        attribute double      clientY;
    readonly        attribute double      pageX;
    readonly        attribute double      pageY;
};

pageX/Y: viewport的像素水平/垂直位置坐标,它会包括scroll offset(滚动后的偏移距离) 如果它所言,它和页面本身宽度和长度相关
screenX/Y: 和viewport无关,和设备屏幕本身相关
clientX/Y: viewport的水平/垂直的位置坐标,它会排除掉scroll offset的数值

touch list接口:
定义了和一个touch事件相关联的点的列表 touchList对象是一个固定的对象,一旦它被创建了,它的内容不会在发生变化
它包括了一个只读的length属性和一个获取指定索引位置touch对象的item(index)方法
interface TouchList {
    readonly        attribute unsigned long length;
    getter Touch? item (unsigned long index);
};

touch event接口:
提供了当不同的键被按上时,相应属性为true, 如ctrl+xxx 某个屏幕上的按钮被相应触发touch
touch事件的target必须是一个element
interface TouchEvent : UIEvent {
    readonly        attribute TouchList touches;
    readonly        attribute TouchList targetTouches;
    readonly        attribute TouchList changedTouches;
    readonly        attribute boolean   altKey;
    readonly        attribute boolean   metaKey;
    readonly        attribute boolean   ctrlKey;
    readonly        attribute boolean   shiftKey;
};

touches: touch事件在屏幕表面触摸过的每个touch point的list
targetTouches: 在target上的touches list
changeTouches: 有助于和相应事件关联的所有点的列表,
               比如:在touchstart里是当前事件激活的点的列表
               在touchmove里是直到事件结束时移动经过的点的列表
               在touchcancel和touchend里是从表面移开时的点的列表


具体事件:
touchstart
touchend
touchmove
touchcancel

window.onload = function () {
    document.getElementById('container').addEventListener('touchstart',function(e) {
        var tou = e.touches.item(0);
        alert(tou.screenX +' / '+tou.screenY);
    },false);
}

 

以下参考:http://www.cnblogs.com/shawn-xie/archive/2012/12/07/2805582.html

【html5构建触屏网站】之touch事件

前言

一个触屏网站到底和传统的pc端网站有什么区别呢，交互方式的改变首当其冲。例如我们常用的click事件，在触屏设备下是如此无力。

手机上的大部分交互都是通过touch来实现的，于是，对于触屏的交互式网站，触摸事件是相当重要的。

Apple在iOS 2.0中引入了触摸事件API，Android正迎头赶上这一事实标准，缩小差距。最近一个W3C工作组正合力制定这一触摸事件规范。

规范

这里我们介绍几种普及得比较好的触摸事件，你可以在绝大多数现代浏览器中来测试这一事件（必须是触屏设备哦）：

touchstart：触摸开始的时候触发

touchmove：手指在屏幕上滑动的时候触发

touchend：触摸结束的时候触发

而每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：

touches：当前位于屏幕上的所有手指的列表。

targetTouches：位于当前DOM元素上手指的列表。

changedTouches：涉及当前事件手指的列表。

每个触摸点由包含了如下触摸信息（常用）：

identifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。一般为从0开始的流水号（android4.1，uc）

target：DOM元素，是动作所针对的目标。

pageX/pageX/clientX/clientY/screenX/screenY：一个数值，动作在屏幕上发生的位置（page包含滚动距离,client不包含滚动距离，screen则以屏幕为基准）。　

radiusX/radiusY/rotationAngle：画出大约相当于手指形状的椭圆形，分别为椭圆形的两个半径和旋转角度。初步测试浏览器不支持，好在功能不常用，欢迎大家反馈。

有了这些信息，我们就可以依据这些事件信息为用户提供不同的反馈了。

下面，我将为大家展示一个小demo，用touchmove实现的单指拖动:

 

/*单指拖动*/
var obj = document.getElementById('id');
obj.addEventListener('touchmove', function(event) {
     // 如果这个元素的位置内只有一个手指的话
    if (event.targetTouches.length == 1) {
　　　　 event.preventDefault();// 阻止浏览器默认事件，重要 
        var touch = event.targetTouches[0];
        // 把元素放在手指所在的位置
        obj.style.left = touch.pageX-50 + 'px';
        obj.style.top = touch.pageY-50 + 'px';
        }
}, false);    

 

 

关于a标签四个伪类在触屏设备中的小技巧：

我们都知道a标签的四个伪类link，visited，active，hover是专为click事件设计的，所以在触屏网站中尽量不要使用它们。经测试大部分也是不可用的。但是这里有一个关于hover的小技巧，当你点击过一个按钮之后，这个按钮就会一直处于hover的状态，此时你基于这个伪类所设置的css也是起作用的，直到你用手指点击另外一个按钮，hover状态就会转移到另一个按钮。利用这一点，我们可以做出一些小效果。此技巧在大多数浏览器中还是可用的。

理想很丰满，现实很骨感！

虽然w3c为多点触控做好了准备，遗憾的是鲜有浏览器支持多点触控的特性，尤其是android平台上的浏览器，也就让上文介绍的手指列表变为了空谈，捕获两个触摸点会直接导致触摸失效！好在ios设备自带的safari浏览器能够支持这一特性，让我们对未来充满希望。毕竟，我们被鼠标的单点操作禁锢了太久，多指操作一个网站是多么令人兴奋！

 

页面滚动

scrollTop

一个元素顶端在父元素顶部溢出不可见的区域的高度

该属性可读可写, jquery里有 $("div").scrollLeft(100);

footer fixed定位时,当js的onscroll 或者jquery的 scroll 事件发生时
通过判断 body的scrollTop()可以知道向上滚动的距离

 

此外还有元素相对于父元素的
    offsetLeft 只读(数值类型) style.left 读写(字符串 '23px')

 

jQuery中，width()方法用于获得元素宽度；innerWidth()方法用于获得包括内边界（padding）的元素宽 度，outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度，如果outerWidth()方法的参数为 true则外边界(margin)也会被包括进

 

getClientRects获取元素占据页面的所有矩形区

http://blog.csdn.net/freshlover/article/details/8985887  http://www.css88.com/archives/4187

getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置

getBoundingClientRect是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。该函数返回一个Object对象，该对象有6 个属性：top,lef,right,bottom,width,height；这里的top、left和css中的理解很相似，width、 height是元素自身的宽高，但是right，bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离，bottom是 指元素下边界距窗口最上面的距离。

 

内容可视区域 clientHeight

 

touch判断方向

$("body").on("touchstart", function(e) {
  e.preventDefault();
  startX = e.originalEvent.changedTouches[0].pageX,
  startY = e.originalEvent .changedTouches[0].pageY;
});

$("body").on("touchmove", function(e) {
  e.preventDefault();
  moveEndX = e.originalEvent.changedTouches[0].pageX,
  moveEndY = e.originalEvent.changedTouches[0].pageY,
  X = moveEndX - startX,
  Y = moveEndY - startY;
   
  if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
      // alert("left to right");
  }
  else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
      // alert("right to left");
  }
  else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
      alert("top 2 bottom");
  }
  else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
      alert("bottom 2 top");
  }
  else{
      alert("just touch");
  }
});