LimeJS : 在物件中觸發 input 的 click

上週在為「偷插電的資訊科學」「HTML5版圖形Graph繪製工具」加入匯入檔案功能是，一直卡在 input 元件無法於 Android 或 iOS 中以程式觸發 click 事件，明明是很簡單的指令，硬是動也不動。試了好久，才重頭研究筆順練習中的寫過的程式碼，結果是再度證明自己現在的健忘。之前 input 的 click 是放在 lime.Button 物件的 click 中觸發的，用 mousedown 或 touchstart 也是會失敗，已經忘了當時測試的過程，但是想必也是花了不少時間才有的成果。基於如此，還是趕快趁記得先將心得寫下，以免日後還要再花時間找答案，重點是以後不見得重頭找還找得到答案啊！

程序大概是：

1. 建立一個 lime.Button 的物件(假設叫 myLimeButton)。
2. 建立一個 HTML input 且 type 為 file 的物件(假設叫 inputFile)。
3. 監聽 myLimeButton 的 click 事件，並將 inputFile.click() 放入程序中。
4. 監聽 inputFile 的 change 事件，取得使用者選擇的檔案內容。

goog.events.listen(myLimeButton, ['click'],function(e){    inputFile.click();
   goog.events.listen(inputFile, ['change'] , function(evt) {
      ......
      ......
   });
});

在好奇心驅使之下，研究了一下 LimeJS 的 button.js ，Button 物件其實是先監聽 mousedown、touchstart和touchmove，然後去處理按下或放開按鈕時的圖片切換，裡面最後的動作是監聽 mouseup 和 touchend，並送出 click 的動作。

實驗了一下，如果不用 lime.Button 的 click 來觸發 input 的 click 事件的話要怎麼做呢？

哈！其實後簡單，就是不能將 inputFile.click(); 那行放到按下去觸發的 mousedown 和 touchstart，而要放在放開時觸發的 mouseup 和 touchend 中。

假設 myLimeSprite 是利用 lime.Sprite 建立的物件，程式碼大概如下：

goog.events.listen( myLimeSprite, ['mouseup', 'touchend'], function(e){
   inputFile.click();
   goog.events.listen(inputFile, ['change'] , function(evt) {
      ......
      ......
   });
});

或是

goog.events.listen( myLimeSprite, ['mousedown', 'touchstart'], function(e){
      ......
      ......
   e.swallow( ['mouseup', 'touchend'], function() {
      inputFile.click();
      goog.events.listen(inputFile, ['change'] , function(evt) {
         ......
         ......
      });
   });
});