Basic question re removing 300ms delay

[nickpish]

Please pardon the basic question, but just so I'm clear-- if I simply want to remove the 300ms delay on tapping a div with the class "mobile-nav-toggle", would I initialize the plugin as follows?

$('.mobile-nav-toggle').on('tap', function(e) {
    e.preventDefault();
 });

Thank you.

[ngryman]

Hi,

No problem for the question :) And yes that would remove the 300ms delay on every touch devices.

Note that in modern browsers the delay can be removed while still keeping the original click event, but this is still a mess to handle if you don't have time for it (source: http://www.sitepoint.com/5-ways-prevent-300ms-click-delay-mobile-devices/).

Also, e.prevenDefault() is only necessary if you want to prevent browser default behavior (i.e. clicking a link will follow that link).

[nickpish]

Hi thanks for the prompt reply! That's great; just curious though, given your comment about e.preventDefault() is there a simpler/more optimal way to initialize the plugin if I only want to remove the delay on that div as I've specified?

I'm also curious, in a more general sense, I've been trying to optimize responsiveness on mobile/touch devices for a current project I have going, and I tried using fastclick.js, and I'm not noticing a huge difference-- does the implementation of your plugin differ from that of something like fastclick?

Thanks again.

[ngryman]

Hi,

e.preventDefault() seems optional as a div doesn't have a default behavior. Note that it does not initialize the plugin, it binds a tap event that will not need 300ms to be triggered. If you don't have any code to react to that event, it won't do anything. For what purpose exactly do you want to remove 300ms delay? For all the links in your div?

---

fastclick has another approach. It transparently alter the standard click event to remove its delay. So you can just include fastclick on an existing website and it works. It does not use jquery.

finger uses jquery to do this via a custom event tap, but it also propose some basic gestures.

Basically fastclick deals with the 300ms on click transparently, and only that. finger deals with it and offers a set of basic gestures events.

Depending on your needs fastclick may be the good candidate.

[nickpish]

Ok that makes sense; to provide more context, I have the following click function defined for revealing a hamburger-style mobile menu that is triggered by a media query:

$(".mobile-nav-toggle").click(function () {
    $(".mobile-nav-menu").slideToggle();
});

So how would I go about binding the finger tap event to this click function?

[ngryman]

With your syntax:

$(".mobile-nav-toggle").tap(function () {
    $(".mobile-nav-menu").slideToggle();
});

With a more generic syntax:

$(".mobile-nav-toggle").on('tap', function () {
    $(".mobile-nav-menu").slideToggle();
});

[nickpish]

Got it, thanks! I'll give it a shot.