HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件:touchstart、touchmove和touchend。

一开始触摸事件touchstart、touchmove和touchend是iOS版Safari浏览器为了向开发人员传达一些信息新添加的事件。因为ios设备既没有鼠标也没有键盘,所以在为移动Safari浏览器开发交互性网页的时候,PC端的鼠标和键盘事件是不够用的。

在iPhone 3Gs发布的时候,其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后,Android上的浏览器也实现了相同的事件。触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。下面具体说明:

touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。

touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。

touchend事件:当手指从屏幕上离开的时候触发。

touchcancel事件:当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间,文档中并没有具体说明,咱们只能去猜测了。

上面的这些事件都会冒泡,也都可以取消。虽然这些触摸事件没有在DOM规范中定义,但是它们却是以兼容DOM的方式实现的。所以,每个触摸事件的event对象都提供了在鼠标实践中常见的属性:bubbles(起泡事件的类型)、cancelable(是否用 preventDefault() 方法可以取消与事件关联的默认动作)、clientX(返回当事件被触发时,鼠标指针的水平坐标)、clientY(返回当事件触发时,鼠标指针的垂直坐标)、screenX(当某个事件被触发时,鼠标指针的水平坐标)和screenY(返回当某个事件被触发时,鼠标指针的垂直坐标)。除了常见的DOM属性,触摸事件还包含下面三个用于跟踪触摸的属性。

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);

javaScript -- touch事件详解(touchstart、touchmove和touchend)的更多相关文章

  1. Touch事件详解及区别,触屏滑动距离计算

    移动端有四个关于触摸的事件,分别是touchstart.touchmove.touchend.touchcancel(比较少用), 它们的触发顺序是touchstart-->touchmove- ...

  2. javascript冒泡事件详解

    冒泡事件: 定义:当多个Dom元素互相嵌套的时候,一个元素触发了某个事件(例如Click事件),那么嵌套此事件的所有元素都会被触发一次Click事件,注意:只会触发他的直系亲属元素,而与其自己,父级, ...

  3. javascript之事件详解2

    1.事件对象: 在触发DOM事件的时候都会产生一个对象. 2.事件对象event: (1).type:获取事件类型 (2).target:获取事件目标 (3).stopPropagation():阻止 ...

  4. JavaScript——event事件详解

    1.事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什么时候会产生Event 对象呢? 例如: 当用户单击某个元素的时候,我们给这个元 ...

  5. 移动端开发touchstart,touchmove,touchend事件详解和项目

    移动端开发touchstart,touchmove,touchend事件详解和项目 最近在做移动端的开发,在一个“服务商管理”页面使用到了触摸事件"touchstart",&quo ...

  6. JavaScript事件详解-Zepto的事件实现(二)【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  7. JavaScript事件详解-zepto的事件实现

    zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们 ...

  8. JavaScript事件详解-jQuery的事件实现(三)

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  9. JAVASCRIPT事件详解-------原生事件基础....

    javaScirpt事件详解-原生事件基础(一)   事件 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,通过监听特定事件的发生,你能 ...

随机推荐

  1. Android Intent 传递数据注意事项

    不要通过 Intent 在 Android 基础组件之间传递大数据(binder transaction缓存为 1MB),可能导致 OOM.

  2. 【BZOJ4029】[HEOI2015]定价(贪心)

    [BZOJ4029][HEOI2015]定价(贪心) 题面 BZOJ 洛谷 题解 每次加上十进制下的\(lowbit\)就行了??? #include<iostream> #include ...

  3. 运行selenium脚本,报seleneium common exception.SessionNotCreatedException:Message:Unable to find a matching set of capabilities错误

  4. JMeter的介绍和简单使用

    Apache官网(https://jmeter.apache.org/)对JMeter的解释: Apache JMeter™ Apache JMeter™应用程序是开源软件,   为负载功能和性能测试 ...

  5. 【C#】 List按指定字段的给出的自定义顺序进行排序

    #引言 有一个集合,对其进行排序,排序规则为:按对象中某个字段的特定顺序进行排序,比如:对象属性id,按照[4,2,5,1]的顺序排序: #代码: public class Foo { public ...

  6. 移动开发day2_css预处理器_flex布局

    css预处理器 一种技术,可以提高编写css代码的技术而已. 有3种预处理器常见 less sass stylues less使用流程 编写符合less语法的less文件 使用工具 将less编译成 ...

  7. 计算机网络(HTTP)之客户识别:cookie机制

    什么是cookie? 承载用户相关信息的HTTP首部 cookie的工作原理 cookie的缺陷 一.什么是cookie? cookie是由服务器生成,发送给USER-Agent(一般是浏览器),(服 ...

  8. ConcurrentHashMap扩容

    然后,说说精华的部分. Cmap 支持并发扩容,实现方式是,将表拆分,让每个线程处理自己的区间.如下图:     假设总长度是 64 ,每个线程可以分到 16 个桶,各自处理,不会互相影响. 而每个线 ...

  9. 关于APP测试的一点思考

    1  系统入口部分要细化测试用例颗粒度  充分准备好测试数据   真实覆盖线上场景 比如注册验证码的获取  国内 国外手机  一般国外手机发送短信 打电话都要加上区号 2 新版本发布   有新功能上线 ...

  10. 教你如何绘制数学函数图像——numpy和matplotlib的简单应用

    numpy和matplotlib的简单应用 一.numpy库 1.什么是numpy NumPy系统是Python的一种开源的数值计算扩展.这种工具可用来存储和处理大型矩阵,比Python自身的嵌套列表 ...