Why/when do I have to tap twice to trigger click on iOS

Question

Ok I feel like I\'m crazy...

I\'m looking at Mobile Safari on iOs 6.0. I can\'t seem to establish any rhyme or reason as to when tapping on an element will trigger

Answer 1

Never figured out the criteria, but this solved my problem by instantly triggering a click as soon as an element is tapped:

https://developers.google.com/mobile/articles/fast_buttons

I had to make a number of additions/modifications to their code to get it working correctly, let me know if you're interested in my method and I will try to post an explanation.

Cheers :)

Answer 2

I was having this issue using Bootstrap, and I found out that the culprit was the tooltip. Remove the tooltip from the button and you don't need to tap it twice anymore.

Answer 3

you can use ontouchstart instead of onclick event on element and call the function focus() on this element if it is input :

document.getElementById('plain-div').addEventListener('touchstart', function() {
   //write body of your function here
    alert(“hi”);
  // if input needs double tap 
  this.focus();

});

Answer 4

It is also worthwhile to mention that ':hover' pseudo-class may prevent 'click' event from firing.

As in mobile browsers click is sometimes used to replace hovering action (e.g. to show dropdown menu), they may trigger artificial 'hover' state on first click and then handle click on the second one.

See https://css-tricks.com/annoying-mobile-double-tap-link-issue/ for detailed explanation and examples of that.

Answer 5

I was googling around to see if i could help you out some and found this piece of code. Try modifying it to your likings and see if you can do what your trying. If you have troubles understanding it let me know and i'll elaborate more. Theres also more to it here where i found it

Jquery hover function and click through on tablet

$('clickable_element').live("touchstart",function(e){
    if ($(this).data('clicked_once')) {
        // element has been tapped (hovered), reset 'clicked_once' data flag and return true
        $(this).data('clicked_once', false);
        return true;
    } else {
        // element has not been tapped (hovered) yet, set 'clicked_once' data flag to true
        e.preventDefault();
        $(this).trigger("mouseenter"); //optional: trigger the hover state, as preventDefault(); breaks this.
        $(this).data('clicked_once', true);
    }
});

Answer 6

iOS will trigger the hover event if an element is "display: none;" in the normal state and "display: block;" or inline-block on :hover.