LimeJS : 由A的事件中去觸發B的事件

先說本篇的筆記重點：

• 利用 dispatchEvent 可以觸發指定物件的某事件。
• 利用 hitTest 可以偵測某個物件是否被按到了(它利用座標計算)。

對於 events 操作都是用仿作學習的，遇到問題時，才會去找資料看，很多地方都一知半解。之前在設計 CS Unplugged 的輔具時，曾經利用 lime.Button 設計了一個 checkBox 的開關，按下去時，會有個指示狀態的圓往左或往右跑，來顯示 On / Off 的狀態。今天應用在戳戳樂時，為了讓它能跟其它的按鈕都有個圓形的外框，於是在 checkBox 下方加了一個 lime.Circle 的元件。

按 checkBox 時，指示器當然會正常的往左或往右跑。但是如果按到背景的 lime.Circle 時，因為它不屬於 checkBox lime.Button 的一部份，當然是動也不動。

很單純的想，那就幫 lime.Circle 加上 mousedown 、touchstart events 的監聽程式，觸發時，再去觸發 lime.Button 的 mousedown ，就可以連動了。

如果是一般的物件，去呼叫 .click() 就好了，但這些 LimeJS 物件，並有有 .click() 可用啊！

試了半天，本來還在研究用 goog.events，試了：

• goog.events.fireListener
• goog.events.hasListener
• goog.evnets.getListener
• goog.events.getListeners

用 fireListener 可以觸發指定物件的某事件，它的語法：

fireListener( listener, eventObject )

它需要兩個參數， listener 可以用 getListeners 來找出來。看看它的語法

getListeners( obj, type, capture )

第一個參數是物件，第二個參數是哪一種 EVENT，本來以為它只要兩個參數就可以運作，結果都是傳回空的陣列。試了半天才將第三個參數(false / true)加上，順利取得 listener，可以給 fireListener 用。

var listener = goog.events.getListeners(target, 'mousedown', false);

goog.events.fireListener(listener[0], e);

後來才知道，其實直接用 dispatchEvent 更簡單：

goog.events.dispatchEvent(target, e);

不過前面兩種方法都是可以看到我的 checkBox 按鈕的部份有動一下，但是出現了錯誤訊息而卡住了：

Uncaught TypeError: this.setState is not a function
    at lime.Circle.<anonymous> (button.js:50)
    at lime.events.EventDispatcher.handleEvent (eventdispatcher.js:142)
    at lime.events.EventDispatcher.listener.<computed> [as __closure_events_fn_36391496] (events.js:978)
    at Object.goog.events.fireListener (events.js:741)
    at HTMLBodyElement.goog.events.handleBrowserEvent_ (events.js:862)
    at HTMLBodyElement.f (events.js:276)

裡面有個關鍵「 this.setState is not a function」，setState 是 lime.Button 中使用的，用來更換按鈕按下去跟彈起來的兩個狀態。

前兩個方法的第二個參數我都是直接把 lime.Circle 按下後的 e 直接傳給 lime.Button，而 e 中記錄的觸發目標(e.target)是 lime.Circle，lime.Circle 並沒有 setStat() 可使用啊！

所以照我的應用，無論是 fireListener 或是  dispatchEvent ，都不能直接把 lime.Circle 的 EVENT 物件傳給 lime.Button 用，要自己設定新的 EVENT 物件。改成這樣：

goog.events.dispatchEvent(t, {
type:'mousedown'
, target:target
});

不過新問題來了，出現了這樣的錯誤訊息：

button.js:32 Uncaught TypeError: e.swallow is not a function

很明顯的，還需要用到 swallow 這個 function，那就餵給它吧！改成：

goog.events.dispatchEvent(t, {
type:'mousedown'
, target:target 
, swallow: function(){}
});

這樣子果然都沒有錯誤訊息了。

不過在測試的時候發現，如果只按比較大的 lime.Circle ，可以正常運作；但是如果按到是放在它中央的 lime.Button 時，開關的動作會有兩次，那不就等於沒按一樣！

這個情形以前也會發生在疊在一起的兩個都監聽 mousedown 的物件，按完上面這個，下面的物件也跟著觸發了。過去都是加一個變數來控制能不能執行按下後的程序，並且在第一個執行完，利用 setTimeout 延遲把控制動作的變數設為 enable，實在麻煩！

今天再仔細研究了 lime.Button 的程序，它在 mousedown 中使用到了 hitTest 來檢測是否按到 target，終於知道它的用途了，把上面的程序再修改為：

if(!target.hitTest(e)) {
goog.events.dispatchEvent(t, {
type:'mousedown'
, target:target 
, swallow: function(){}
});
}

也是就在 lime.Circle 中檢查，當不是按到位於 target (lime.Button) 的範圍內時，才去觸發 target 的 mousedown，這樣就能避免 target 的 mousedown 被連續觸發了。