元素上单击打开DIV,收盘机构或元素点击Mootools的
我做了这个小提琴 http://jsfiddle.net/nAb6N/10/元素上单击打开DIV,收盘机构或元素点击Mootools的
正如你可以看到我有2个动画师,一个元素和体类, 我后加入类以身体首先点击一个元素,但一旦我点击正文不会关闭它。如果我定义动画师为
var animators = $$('#opendiv,body');
它工作正常,除非我不希望div打开身体点击。我需要它关闭身体点击。
任何帮助表示赞赏。
谢谢!
对。看起来好像您真的需要关闭一个外键模式。下面是最值得注意的是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边缘)。
一如既往的我们的mootools大师Dimitar :) – Benn 2012-03-01 20:54:57
你的小提琴指向'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