元素上单击打开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的

回答

相关问题