Question

I’m building a responsive site and the main navigation shows the sub-navigation on hover. On touch screens it does this on click (touchstart more specifically).

On desktop when the user is no longer hovering over the nav or sub nav it goes away. To achieve the same kind of thing on touch screen I have bound a function to the touchstart event of the body. This function checks whether the touch happened on an element within the nav. If it didn’t it closes an sub-navigation that is open.

The trouble is I only want this to happen if the user taps outside the nav, not if they scroll. How can I check whether the user scrolled as opposed to just tapping?

The function so far is this:

$('body').bind('touchstart', function(e) {
    if($(e.target).closest('nav').length == 0) {
        closeAll();
    }
});

Answer 1

I’d detect where they touched (co-ordinates) on touchstart, and set a time to check a few milliseconds after… if the touch point has moved more than a few pixels, they’re scrolling.

EDIT:
Something else I came across when coding for a touchscreen interface is that certain devices have a built-in delay of ~300ms when using click(). You can override this, if you haven’t already.