Submit to StumbleUponSubmit to TwitterSubmit to redditSubmit to DiggSubmit to Del.icio.usSubmit to Google
Custom outerClick event
filed under MooTools, posted on 31st August 2009 by Chris, 6 comments
I'm very happy to announce today's snippet: The outerClick custom event. It is a special gem by MooTools developer Scott Kyle. I couldn't be more happy to be allowed to release it here. While there is a well-known version of the outerClick event by Jan Kassens, it is also kind of a hack. This new version is dead-simple, elegant and lightweight.
The event fires when you click outside of the element the event handler has been attached to. You can use this to hide elements (popups) when a user focusses on another section of the screen.
The Code
The script has initially been released and since updated on Scott's blog: Fun with Custom Events on Elements in MooTools
As said above, the code is very simple. Just copy this little snippet into your own scripts and start using the outerClick event
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);
}
};
Usage
You can attach it like any other event in MooTools:
myElement.addEvent('outerClick', function(){
console.log('You clicked outside the element');
});
Leave a comment
6 comments on Custom outerClick event
hamburger posted on 9th March 2010
Nike Dunk posted on 9th March 2010
http://www.dunk2u.com Nike Dunk
http://www.jerseys-buy.com/soccer-jersey/Shop-by-Country/USA.html USA jersey
http://www.jerseys-buy.com/soccer-jersey/Shop-by-Country/USA.html USA jersey
Chris posted on 5th September 2009
This is not possible unless you define yet another custom event which instead of the document uses the element you want to define the event on.
Daniel Steigerwald posted on 31st August 2009
I like its simplicity. I used outerclick for a long time, but this (and my old own) implementation could easily fail. I used it for simulating of lost focus until I realized, that any element can be focusable/active with tabIndex "hack". When I switched to full focus/blur (bubbling) management, outerclick event was removed since there are many issues (iframes, bubbling etc.) related. Anyway, I like your kiss solution.
tbela99 posted on 31st August 2009
As I said on the kassens blog, you should be aware that this will be useless if the event propagation is stopped before you catch it.
//outerClick is not fired on this link
$$('a.innerclick').addEvent('click', function (e) {
//this prevent outerclick to be fired
e.stop();
});
});
window.addEvent('domready', function () {
$$('a.outerclick').addEvent('outerClick', function(){
alert('You clicked outside of $("test").');
});
//outerClick is not fired on this link
$$('a.innerclick').addEvent('click', function (e) {
//this prevent outerclick to be fired
e.stop();
});
});
window.addEvent('domready', function () {
$$('a.outerclick').addEvent('outerClick', function(){
alert('You clicked outside of $("test").');
});
// if click outside the box close it
$(document.body).addEvent('click',function(e) {
var x = $($pick(e.target,e.srcElement));
if(log.getStyle('opacity').toInt() == 1 && !x.getParent('.box'))
{
log.fade('out');
}
});