CODEWITHSUNDEEP
javascriptjqueryiosipad
Anthony_Z
Anthony_Z

Reputation: 725

How to avoid "double touch" on an iPad using jQuery?

I have a button that when pressed brings you to the top of the page and highlights a search input. It works fine except the iPad where the user has to click twice to force it to work.

It is not a matter or recognizing a touch event, but making sure that the touch event fires on the first try.

How can I avoid the "double touch" on an iPad?

  $('.my-button').click(function() { 
      $("html, body").animate({ scrollTop: 0 }, 500);
      $('.search').addClass('highlighted'); 
  });

Upvotes: 0

Views: 581

Answers (2)

Banik
Banik

Reputation: 921

    $('.my-button').bind("click",function() { 
        $(this).unbind(); 
        $("html, body").animate({ scrollTop: 0 }, 500); 
        $('.search').addClass('highlighted');
        $(this).bind();
    });

jquery bind does attach a handler to an event for a particular elements,so whenever you bind a click event it does not work on double click because you can bind a double click event separately. So when you hit a double click in this case after 1 st click it will unbind the click event so that click event does not repeat during the execution of the functinality and again bind it after all your functinality.Unbind removes a previously-attached event handler from the element. For more check bind and unbind

Upvotes: 1

Edie Johnny
Edie Johnny

Reputation: 523

Did you try the 'tap' jQuery event?

$('.my-button').on('tap', function() { 
   $("html, body").animate({ scrollTop: 0 }, 500);
   $('.search').addClass('highlighted'); 
});

Upvotes: 0

Related Questions