Click listener on iPhone / iPad

Question

In a PC, Mac and any Android device, when you click or touch an image, the showItem function is called, and I display the image in full screen mode.

However, when I test this in Iphone / iPad, when you first touch the image, the hover event is fired, and you need to touch another time to actually activate the function. How can I overcome this?

jQuery

this1.on("click", function(evt){ 
    evt.preventDefault();
    evt.stopPropagation();
    showItem(this1);
});

PS: the this1 variable, is the img with the .item class below

HTML / PHP

<div class='galleryImage'>
    <span class='hidden' title='images/galleries/".$category."/".$dir[$i]."' ></span>
    <img class='item image' src='images/galleries/".$category."/".$dir[$i]."' alt='image-jpg' />
    <img src='images/ajax-small.gif' class='galleryLoader' alt='galleryLoader' />
</div>

score 1 · Accepted Answer · edited May 23 '17 at 12:13

1

Try tap. Make sure you load jQuery mobile as well.

this1.on("tap", function() {
    // your function here
});

See also

How to recognize touch events using jQuery in Safari for iPad?

edited May 23 '17 at 12:13

Community

1
1

answered Mar 31 '13 at 11:21

Antony

14,900
10
46
74

Thank you for the answer, however, when I try to add jQuery mobile in my website, markup is added to most elements in my page, and the layout breaks. – Νίκος Ρουσσουνέλος Apr 02 '13 at 06:15
@ΝίκοςΡουσσουνέλος Do not use the stylesheet. Just add ``. – Antony Apr 02 '13 at 06:17

Click listener on iPhone / iPad

1 Answers1