parti
parti

Reputation: 215

Click & Double Click Events on Mobile

I'm trying to get tap / doubletap things to work on mobile browsers. I have the following code:

$(function() {
  $(".vppop").mouseenter(function() { // Desktop browsers only
      $(".vppop").addClass("vppopscale");
  });
  $(".vppop").mouseleave(function() { // Desktop browsers only
      $(".vppop").removeClass("vppopscale");
  });
  $(".vppop").on('tap', function(e) { // Mobile browsers only
      e.preventDefault(); // Stop from following link
      $(".vppop").addClass("vppopscale").delay(300).removeClass("vppopscale");
  });
  $(".vppop").on('doubletap', function() { // Mobile browsers only
      // Go to Link
  });
});

Using finger plugin for mobile events: https://github.com/ngryman/jquery.finger

Can't get tap event to prevent link following & not sure what I need for doubletap event to get it to follow link. Thanks for the help.

Upvotes: 3

Views: 8147

Answers (1)

ngryman
ngryman

Reputation: 7672

I've just seen this question. This is perhaps too late, but if you update Finger to the latest version you will be able to prevent default behavior this way. This was not supported in older versions.

However, if you attach both tap and doubletap event listeners to the same element, and that tap prevents default behavior, then it will also apply for the doubletap.

So you might want to open the link manually in your doubletap listener:

$(".vppop").on('doubletap', function() { // Mobile browsers only
    window.location = this.href;
});

Hope this helps, even if it's a little late :)

Upvotes: 5

Related Questions