2
\$\begingroup\$

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:

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

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

Improve this question
\$\endgroup\$
0

1 Answer 1

Reset to default
1
\$\begingroup\$

After several days of hard work, I think that I've found the answers to my questions.

  1. 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.

  2. 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.

Improve this answer
\$\endgroup\$
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.