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 seevar $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 <html> 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?
Click and/or focus outside & -webkit-tap-highlight-color
javascript;jquery
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 && 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 <html> 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.