2018年3月3日 星期六

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) {
         ......
         ......
      });
   });
});



沒有留言:

張貼留言

 
© 2009. Design by Pocket