《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浏覽器，因為條件限制沒有真正的用手機去測。如果我理解有錯的地方還望大家指出。再次向尼古拉斯大神表示致敬。