2012-09-09

LimeJS 的 mouseover 與 mouseout 有問題,結合 jQuery 來處理

剛摸 LimeJS,只知道他是基於 HTML 5,有兩種 Render Engine(DOM 與 CANVAS)。

只是想實做一個簡單的 mouseover 與 mouseout 來改變圖片,用了下面註解掉的 code,卻發現只有第一次有用,第二次以後圖片就不會再切換,加入 alert 後發現,第一次觸發 mouseover,以後只要游標還在整個 Director 裡,就不斷地觸發 mouseout。

這情況我讓想到 在 jQuery 用 mouseenter 與 mouseleave 取代 mouseover 與 mouseout,那就用 jQuery 來試試。
// 先建立一個方形區域並放入圖片
var closeIcon = new lime.Sprite().setFill('images/x.gif').setAnchorPoint(0.5,0).setPosition(ag.gameW/2+150,120);
layer.appendChild(closeIcon);

/* 按照 LimeJS 官方的作法,有問題
goog.events.listen(closeIcon, [ 'mouseover' ], function(e) {
closeIcon.setFill('images/x2.gif');
e.swallow([ 'mouseout' ], function() {
closeIcon.setFill('images/x.gif');
});
});
*/

// 結合 jQuery 可以解決這問題
var closeIconJ = $(closeIcon.getDeepestDomElement());
closeIconJ.css('cursor', 'pointer'); // 附加價值,LimeJS 不知怎設定 cursor
closeIconJ.mouseenter(function(){
closeIcon.setFill('images/x2.gif');
});
closeIconJ.mouseleave(function(){
closeIcon.setFill('images/x.gif');
}); 
嗯,可行。

也許本來這種簡單的功能,就不應該用 LimeJS 來處理。
---

沒有留言:

張貼留言