元素上單擊打開DIV，收盤機構或元素點擊Mootools的

我做了這個小提琴 http://jsfiddle.net/nAb6N/10/元素上單擊打開DIV，收盤機構或元素點擊Mootools的

正如你可以看到我有2個動畫師，一個元素和體類，我後加入類以身體首先點擊一個元素，但一旦我點擊正文不會關閉它。如果我定義動畫師爲

var animators = $$('#opendiv,body');

它工作正常，除非我不希望div打開身體點擊。我需要它關閉身體點擊。

任何幫助表示讚賞。

謝謝！

來源

2012-02-29 Benn

你的小提琴指向'body.closebox'，而在這裏你只是說'身體'上面，顯然你正在嘗試的東西......在你附加時，身體沒有這樣的類，它不會得到事件因爲它不會被選擇器返回。你是不是委派，但添加事件監聽器可用的元素。所以，真的是在點擊#opendiv之外關閉之後？ - 又名「outerClick」？或將事件委託給稍後會見的條件？ – 2012-03-01 00:32:19

@Dimitar Christoff好吧，我試圖關閉「outerClick」上的框，就像你看到的，是的，我明白了爲什麼它不適用於點擊事件之前不存在的類。有關如何實現這一目標的任何建議？ – Benn 2012-03-01 02:40:55

我必須爲身體做點擊事件嗎？這是我試圖遠離，因爲我的點擊事件是充滿變形爲其他div – Benn 2012-03-01 02:43:40

對。看起來好像您真的需要關閉一個外鍵模式。下面是最值得注意的是MooTools的開發者中使用的一個，允許您創建一個自定義事件，根據點擊：

Element.Events.outerClick = { 
    base : 'click', 
    condition : function(event){ 
     event.stopPropagation(); 
     return false; 
    }, 
    onAdd : function(fn){ 
     this.getDocument().addEvent('click', fn); 
    }, 
    onRemove : function(fn){ 
     this.getDocument().removeEvent('click', fn); 
    } 
};

它的工作原理是：它是基於一個正常click。添加後，它將回調添加爲文檔上的單擊事件。當click發生在元素內部時，它會通過event.stopPropagation();停止冒泡，否則它會冒泡並且回調會運行。

這裏是上述後如何聯繫在一起：

http://jsfiddle.net/dimitar/nAb6N/13/

(function() { 
    var opener = $('opendiv'); 
    var boxtoopen = $('box'); 

    boxtoopen.set('morph', { 
     duration: 700, 
     transition: 'bounce:out' 
    }); 

    boxtoopen.addEvent('outerClick', function(event) { 
     boxtoopen.morph(".openOff"); 
     opener.removeClass("hide"); 
    }); 

    opener.addEvent('click', function(e) { 
     e.stop(); 
     boxtoopen.morph(".openOn");  
     this.addClass("hide"); 
    }); 

})();

我也「外包」的變形特性的CSS，因爲它更有意義，語義。

P.S.請注意，您需要mootools 1.4.3或1.4.5，但不是1.4.4，因爲該版本中的單元有變形bug。上面的jsfiddle使用1.4.6（mootools邊緣）。

來源

2012-03-01 09:49:07

一如既往的我們的mootools大師Dimitar :) – Benn 2012-03-01 20:54:57

元素上單擊打開DIV，收盤機構或元素點擊Mootools的

回答

相關問題