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 <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?