JavaScript : 讓行動載具文件不要因拖曳動作亂滑動

忘了從哪一個版本起，無論在 iOS 或 Android 上的瀏覽器玩我寫的 HTML5 小工具，按下並移動位置時，整份文件會跟著滑動，這在玩遊戲進行拖曳或畫圖時真是一大困擾。為了解決我的筆順練習工具在寫字或塗鴨時，畫面一直滑動的問題，忘了是在哪裡找到解決的方法是加入底下的程式碼：

document.addEventListener('touchstart', function(e){ return; }, { passive : false });
document.addEventListener('touchmove', function(e){ e.preventDefault(); }, { passive : false });

主要是改變網頁主體的 document 在監聽到 touchmove 事件時，可以不要執行原來滑動的行為，這樣子，使用工具時就不會滑來滑去，不勝其擾。

筆順練習工具在加了前述的語法後，畫面果然就不會亂滑動了；不過，之前想說如法泡製，來解決其它遊戲的滑動問題，將語法複製、貼上，很容易吧！哈～事情總是沒想的簡單。加了語法的遊戲在測試時可以將畫面固定得牢牢的，在利用 LimeJS 的 build -a 指令，把 JavaScript 的原始碼編譯簡化後，滑動的問題還是出現了。當時百思不得其解，試了各種方法，問題仍然存在，最後只好放棄。

昨天在 build 新版的筆順練習工具時，因為加了「-a」參數，想讓程式碼更精簡，有部份功能運作不正常；而不加「-a」參數時又可以使用。讓我聯想到為什麼舊版的筆順練習工具滑動問題得以解決，而新版的在加「-a」去 build 時，又產生滑動問題的原因了。

檢視一下前面兩行程式碼的最後一個參數：

{ passive : false }

這是一個物件，並將「passive」設為「false」，這麼簡單有什麼問題會產生呢？

關鍵就在 LimeJS 是利用 goog Closure optimization 來簡化 JavaScript 的程式碼，所謂的簡化，主要就是將變數、函數名稱 ...... 等變得愈短愈簡單。參考之前這一篇中寫到的：

• 雄 : LimeJS : 存取物件的屬性

想要達到程式碼的大小最小化，使用「ADVANCED_OPTIMIZATIONS」，如果沒注意物件存取資料的方式，名稱有可能被改變，導致資料傳遞時會發生失誤。

關於這一點，可以由 build 完的、最佳化後的程式碼看得出來。

1-0 原始碼中用「{ passive : false }」：

document.addEventListener('touchmove', function(e){ e.preventDefault();}, { passive : false });

1-1 未使用「ADVANCED_OPTIMIZATIONS」來 build 後變成：

document.addEventListener("touchmove",function(a){a.preventDefault()},{passive:!1});

1-2 使用「-a」(「ADVANCED_OPTIMIZATIONS」) 來 build 後變成：

document.addEventListener("touchmove",function(a){a.preventDefault()},{ef:q});

註：上面的「q」為 0，可以追到 build 完的程式碼中有「q=!1;」

很明顯的，「-a」參數一加上去，build 完的物件參數名稱「passive」已經被改為「ef」，這樣就無法正確的設定給 document 的 touchmove 事件。

再來看看最後一個參數，在名稱加上一對單引號變成：

{ 'passive' : false }

2-0 原始碼中用「{ 'passive' : false }」：

document.addEventListener('touchmove', function(e){ e.preventDefault();}, { 'passive' : false });

2-1 未使用「ADVANCED_OPTIMIZATIONS」來 build 後變成：

document.addEventListener("touchmove",function(a){a.preventDefault()},{passive:!1});

2-2 使用「-a」(「ADVANCED_OPTIMIZATIONS」) 來 build 後變成：

document.addEventListener("touchmove",function(a){a.preventDefault()},{passive:q});

註：上面的「q」為 0，可以追到 build 完的程式碼中有「q=!1;」

1-0 和 2-0 就只在變數名稱差了一對單引號，但使用引號的名稱讓 2-1、2-2 中的「passive」可以不管在什麼情形下都叫「passive」，始終不改其名。關於這一點，以後可牢牢記住才行，不然真的是除蟲除到地老天荒啊！