fx.morph列表上的「點擊」而不是「鼠標」

我試圖得到類似的結果fx.morph演示，但點擊而不是「mouseenter」或「mouseleave」。如果點擊列表選項，它應該變形。如果另一個項目被點擊，它應該變形，而原始變形爲默認狀態。第一部分是沒有道理的，但到目前爲止，我還沒有能夠讓第二部分按照需要工作。我試圖創建一個「clickOutside」事件，但只有當您點擊某個不是列表項的地方時纔有效。新項目將變形，但舊項目不會恢復到其原始狀態。fx.morph列表上的「點擊」而不是「鼠標」

我在哪裏至今：

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

window.addEvent('domready', function() { 
    $$('#idList LI').each(function(el) { 
     el.set('morph', { 
      duration: 200 
     }).addEvents({ 
      click: el.morph.pass('.hover', el), 
      outerClick: el.morph.pass('.default', el) 
     }); 
    }); 

});

如果你想搗鼓：http://jsfiddle.net/JXTMa/

我恢復回原來的mouseenter例子爲說明原來的概念的緣故。

來源

2013-01-02 joe

的outerClick活動將由e.stopPropagation被採空，所以你將需要與this.getDocument().fireEvent('click')

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

這裏手動觸發事件就是一個例子小提琴：http://jsfiddle.net/cNNjP/1/

，我有時喜歡的另一種方法是創建一個類並將其用作組件。下面是一個例子：http://jsfiddle.net/kVnY4/3/

編輯：更新了我的組件利用toElement和store的第二個小提琴。檢查你的javascript控制檯，你會看到第一個元素從對象中檢索，然後從元素中檢索對象。

來源

2013-01-02 20:08:13 Nils

這改變了outerClick的工作方式，如果你在其他地方使用它，可能會破壞你的func。將所有這些事件添加到文檔中也有點貴。你可以在CSS中完成整個事情：檢查和轉換以及:) –

除了完美之外，我不知道還有什麼要說的！當我睡一覺時，我將不得不坐下來用兩個例子，這樣我就可以消化所有東西並保留它，但我想我明白你對第二個例子的看法。謝謝百萬:) – joe

我絕對看到你的觀點，Dimitar。爲了這個特定的目的，我知道肯定沒有什麼會被打破，但我可能會使用建議的替代方法開始養成這樣做的習慣，以避免任何未來的破壞。 :) – joe

fx.morph列表上的「點擊」而不是「鼠標」

回答

相關問題