《javascript高级程序设计》 touch事件的一个小错误

  最近一段时候都在拜读尼古拉斯大神的《javascript高级程序设计》,真的是一本好书,通俗易懂,条理比《javascript权威指南》好理解一些,当然《javascript权威指南》有权威指南的优点,不闲话了,入正题。

看技术书我通常都喜欢把书上的代码敲一遍,虽然很花时间,但只有动手敲的时候,脑中才有各种乱七八糟的想法蹦出来,为什么不能按照自己想的写,为什么书上的代码更好更优雅,还有没有别的办法去解决眼前的问题,想的多了,理解就很深,当然最重要的就是记得牢了。即使很浅显易懂的代码,我也照样敲一遍,没办法强迫症伤不起。

在417页,13.4.9节中,关于javascript中触摸和手势事件的讲解中,有一段代码我这边怎么运行都不对。后来大胆猜测应该是书上的一个错误,先敲出来,如果我错了,希望大神帮忙指正。

  书中代码如下:

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 + ")";
          break;
        case "touchend":
          output.innerHTML += "<br>Touch ended (" +event.changedTouches[0].clientX + "," +event.changedTouches[0].clientY + ")";
          break;
        case "touchmove":
          event.preventDefault(); //阻止滚动
          output.innerHTML += "<br>Touch moved (" +event.changedTouches[0].clientX + "," +event.changedTouches[0].clientY + ")";
          break;
      }
  }
}
EventUtil.addHandler(document, "touchstart", handleTouchEvent);
EventUtil.addHandler(document, "touchend", handleTouchEvent);
EventUtil.addHandler(document, "touchmove", handleTouchEvent);

  出错的地方在这里:

 

  当触发touchstart和touchmove事件的时候没有问题,程序能正确的进入 if  然后根据case执行对应的语句,但是当触发touchend事件的时候,event.touches.length已经等于0了,不能再进入if 中,也就不能执行case中的语句,所以触发touchend的时候永远不会执行程序。正确的程序应该是

if (event.touches.length == 1||event.touches.length==0){……}

  我测试的时候使用的是chrome浏览器,因为条件限制没有真正的用手机去测。如果我理解有错的地方还望大家指出。再次向尼古拉斯大神表示致敬。

时间: 2025-01-13 18:38:15

《javascript高级程序设计》 touch事件的一个小错误的相关文章

javascript高级程序设计---拖拉事件

拖拉事件 拖拉指的是,用户在某个对象上按下鼠标键不放,拖动它到另一个位置,然后释放鼠标键,将该对象放在那里. 拖拉的对象有好几种,包括Element节点.图片.链接.选中的文字等等.在HTML网页中,除了Element节点默认不可以拖拉,其他(图片.链接.选中的文字)都是可以直接拖拉的.为了让Element节点可拖拉,可以将该节点的draggable属性设为true. <div draggable="true"> 此区域可拖拉 </div> draggable属

《JAVASCRIPT高级程序设计》事件处理程序和事件类型

一.事件流 谈到事件,首要要理解事件流的概念:事件流是指从页面接受事件的顺序:“DOM2级事件”规定事件流包括三个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段.目前大部分的浏览器的事件流是事件冒泡,即最开始由具体的元素接收事件,然后逐级传播到不具体的节点,直到传播到windows对象:另一种事件流是事件捕获,目前使用得比较少,是指文档对象先接收到事件,然后逐级向下,一直传播到事件的实际目标. 二.事件处理程序 1.两种表示方式 <input type="button" valu

《JavaScript高级程序设计》—— 事件流

(1) 事件冒泡 IE 的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档). (2) 事件捕获 事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件.事件捕获的用意在于在事件到达预定目标之前捕获它. (3) DOM事件流 " DOM2级事件"规定的事件流包括三个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段.首先发生的是事件捕获,为截获事件提供了机

JavaScript高级程序设计之事件

当用户按下某个按钮是,就会触发对应事件,事件在执行注册事件时,绑定的程序,实现一次成功的浏览器与JS之间的交互.其中事件基于设计模式中的观察者模式原理实现,但又有些不同,事件它还拥有着一些属于自己的特点. 事件流 事件冒泡是IE的产物,它的流向,是自下向上,从绑定事件的具体元素开始,一直流到具体元素的最顶级元素. 事件捕获是网景的产物,它的流向与事件冒泡正好相反,是自上向下的,从绑定时间的具体元素的顶级元素开始,一直流到绑定事件的具体元素.目前主流的浏览器既至此冒泡又支持捕获,不过一般冒泡就能满

[JavaScript高级程序设计]之事件篇01

事件流 IE提出的是事件冒泡流,而Netscape提出的是事件捕获流. 事件冒泡流即当事件开始时,由具体的节点接收,然后逐级向上传播到较为不具体的节点. 事件捕获流即由不具体的节点逐级向下传播到具体的节点. 事件捕获的起点和事件冒泡的中终点都是window对象.低版本IE除外. DOM事件流DOM2级事件分为三个阶段:捕获阶段.处于目标阶段.冒泡阶段. 事件处理 DOM0级事件处理将一个函数赋值给一个事件处理程序的属性,回调中的this为当前元素,只能绑定一个回调,只执行最后一次绑定的回调 1

javascript高级程序设计 第十三章--事件

javascript高级程序设计 第十三章--事件js与HTML的交互就是通过事件实现的,事件就是文档或浏览器窗口中发生的一些特定的交互瞬间. 事件流:事件流描述的是从页面中接收事件的顺序,IE的是事件冒泡流,Netscape的是事件捕获流,这个两个是完全相反的事件流概念. 事件冒泡:由最具体的元素接收,然后逐级向上传播到更高级的节点,即事件沿DOM树向上传播,直到document对象. 事件捕获:不大具体的节点应该更早接收到事件,相当于沿DOM节点树向下级传播直到事件的实际目标,在浏览器中,是

web前端之JavaScript高级程序设计六:事件

web前端之JavaScript高级程序设计六:事件 JavaScript 与 HTML 之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软件工程中被称为观察员模式的模型,支持页面的行为(JavaScript 代码)与页面的外观(HTML 和 CSS 代码)之间的松散耦合. 事件流: 事件流描述的是从页面中接收事件的顺序.但有意思的是, IE 和 Netscape 开发团队居然提出了

读书时间:《JavaScript高级程序设计》 一

在2011年的时候第一次看了<JavaScript高级程序设计>第二版,那时见到手上的书,第一感觉真是好厚的一本书啊.现在再次回顾一下,看的是<JavaScript高级程序设计>第三版,并记录一些了内容. 第1章:JavaScript简介 JavaScript的历史.版本,可以看到一个有趣的故事. JavaScript是什么? 一个完整的JavaScript应该有3个不同的部分组成: 1. ECMAScript(核心) ECMAScript规定了语言的:语法.类型.语句.关键字.保

《Javascript高级程序设计》阅读记录(四):第五章 下

这个系列,我会把阅读<Javascript高级程序设计>之后,感觉讲的比较深入,而且实际使用价值较大的内容记录下来,并且注释上我的一些想法.做这个一方面是提升了我的阅读效果以及方便我以后阅读 另一个目的是,Javascript高级程序设计这本书内容很多也很厚,希望其他没有时间的人可以通过看这系列摘录,就可以大体学到书里面的核心内容. 绿色背景的内容是我认为比较值得注意的原著内容. 黄色背景的内容是我认为非常重要的原著内容. 我的理解会用蓝色的字体标示出来. 这章的内容较多,而且比较重要,分两篇