Comments on: Track Clicks Outside Active Elements with MooTools or jQuery

By: Dr.Death

Dr.Death — Wed, 20 Apr 2011 11:06:10 +0000

Still don’t add “outerclick” event?

By: Marcel

Marcel — Sun, 02 May 2010 22:29:28 +0000

Just wondering if you did create the custom event for MT…

@David Walsh:

By: David Walsh

David Walsh — Tue, 27 Apr 2010 04:03:14 +0000

@Kirill: It would be the HTML tag, if anything…

By: Kirill

Kirill — Wed, 14 Apr 2010 13:10:05 +0000

Thanks! That really helped me. Thought I had to attach the click event to the window, because the body of the document doesn’t always extends to the entire window.

By: venu

venu — Wed, 24 Mar 2010 23:28:42 +0000

@jamie: yes iam also want to see the demo for this

By: hamburger

hamburger — Sun, 21 Mar 2010 11:37:31 +0000

i did it like this:

// if click outside the box .pop_dialog_table close it
$(document.body).addEvent(‘click’,function(e) {
var x = $($pick(e.target,e.srcElement));
if(log.getStyle(‘opacity’).toInt() == 1 && !x.getParent(‘.pop_dialog_table’))
{
log.fade(‘out’);
}
});

By: Simon

Simon — Fri, 19 Mar 2010 04:26:39 +0000

Argh your pesky head made me click the submit button before i finished writing that…

The following is how I’d typically determine if an event target lived inside of the parent.

var parent = parentNode
check = e.target;
while (check && check != parent) {
check = check.parentNode;
}

It either winds up being null or the parent your looking for.

So those are the two states your looking for.

Never even knew MooTools had a .getParents() method.

Will be interesting to see which one performs better.

By: Simon

Simon — Fri, 19 Mar 2010 04:16:03 +0000

Very nice bro, I’ve been using while loops in this format to do much the same thing for a while now for ordering visual sitemaps.

// Bubble up to get the ROW that is hovered over
over = event.target;

while (over && over.nodeName != this.options.childTag) {
over = over.parentNode;
}

I will test out my class with your code VS the while loops and see which one is faster.

By: David Walsh

David Walsh — Fri, 19 Mar 2010 01:33:09 +0000

@jamie: http://davidwalsh.name/dw-content/twitter-dropdown-jquery.php

@“Cowboy” Ben Alman: I’ll be creating the MooTools custom event this weekend. Nice work on your jQuery version!

By: "Cowboy" Ben Alman

"Cowboy" Ben Alman — Fri, 19 Mar 2010 00:49:46 +0000

@Sean O / @David Walsh: This approach (event delegation) is exactly the approach I took with my recently-released jQuery outside events plugin, except I used jQuery’s own special events API to actually create a whole new, custom event for clickoutside that can be bound to and triggered using the standard jQuery events methods.

In addition, I’ve created an “outside” event for every native jQuery event that madee sense, as well as included a method to allow users to create their own. Feel free to check out the examples on the project page, on my site!

http://benalman.com/projects/jquery-outside-events-plugin/