Click and/or focus outside & -webkit-tap-highlight-color I'm working code sample here.

Note: Above only tested in Firefox 13.0.1, iPad (non-retina) and Chrome 20.0.x.

Here's the relevant code:

var $outside = $(document)
    .add($('html'))
    .add($(':not[' + data.target + ']'));

$outside.on('focusin.goober click.goober', function(e) {

    if ($(e.target).closest(data.target).length === 0) {

        $outside.off('.goober');

        data.divs.hide(); // Collection of sub menu divs.

    } else {

        return true;

    }

}).css('-webkit-tap-highlight-color', 'rgba(0, 0, 0, 0)'); // Hide tap highlight color via Mobile Safari.


I'm looking for feedback on two issues:


Clicking and/or focusing outside: Where you see

var $outside = $(document).add($('html')).add($(':not[' + data.target + ']'));


that's where I check for focusin/click events outside the target menu. I have my reservations about applying event handlers to everything just to detect an outside focus/click. Without using a plugin, is there a better way to detect focus/click outside of a target element? Could this code be improved?
I'm also concerned about how -webkit-tap-highlight-color behaves when tapping outside via iPad. As a quick monkey patch, I've added

.css('-webkit-tap-highlight-color', 'rgba(0, 0, 0, 0)')


but I don't yet see that as the perfect solution.


In regards to #2 above:

I wonder if I should add a CSS class to the &lt;html&gt; element, something like "disable-highlight", and have in my CSS

.disable-highlight * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }


and have JS add the class when the menu is being interacted with (and remove it when its not)? I rarely use * selector in my CSS these days, but as a temporary way to hide the tap/click highlight, maybe that's not a bad idea?
After several days of hard work, I think that I've found the answers to my questions.


The best element I've found to check for outside click/focus is $(document).

Caveat: When on iPad, the event needs to be touchstart, not click.

I've got a question going here, but here's the "trick" I'm using currently:

var foo = (('ontouchstart' in window) || (window.DocumentTouch &amp;&amp; document instanceof DocumentTouch)) ? 'touchstart' : 'click';


I'm using this technique here to handle focus/click. Essentially, when there's keyboard tab focus, I call click and within that event handler, I call my code to check for outside focus/click/touch.
The idea I had to add a CSS class to &lt;html&gt; works pretty good. When the event handlers are setup to listen for focus/click/touch outside, I add the class. Once there's been focus/click/touch on the outside, I remove the class.

My CSS looks like so:

html.mw-outside * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }


It kinda feels a little hacky, though.