Catching the Click on DOM/HTML/BODY event on the iPad

Question

I'm using jQuery to detect a click on the DOM - or let's every click.

$(document).click(function(){
   alert("Click :-)");
});

This works pretty good in every browser except Safari for iPad/iPhone. I've also tried to apply the event on the html or body element - no way. How to detect a common click on the iPad/iPhone?

Best regards, Jim

Solution 1

As I found on http://www.danwellman.co.uk/fixing-jquery-click-events-for-the-ipad/ you may test the user agent and use touchstart or click depending on the platform

var ua = navigator.userAgent,
        event = (ua.match(/iPad/i)) ? "touchstart" : "click";

$(document).on(event, function (ev) {
    ...
});

Solution 2

These answers got me started on the right direction (first google for "jquery document.on ipad"), so thanks for that, but borrowing from this answer I simplified it to something like this:

$(document).on("click touchstart", function (ev) {
    ...
});

This would obviously produce undesired results if a platform (like Android or Windows Phone or something) supported both click and touchstart in the event bubble, so if anyone knows that let me know (and I'll fix my code and delete this answer! :)

Solution 3

I have used this:

jQuery(document).on('touchstart',function(event){
    //your code here
         });

-also instead of "document" you can bind to any DOM object.

and this(from another forum answer):

var body = document.getElementsByTagName('body')[0];

 if ("ontouchstart" in window) {

        body.ontouchstart = function(){
   //your code here
         };     
                 };

-again, you don't have to use 'body' you can assign a variable to an object by class this way:

var dd = document.getElementsByClassName('infoAction')[0]; 

Solution 4

You may use the touchstart event instead.

Solution 5

You can attach the click listener to the main wrapper element (say div that encloses all the components in your page).

View more solutions

Comments

[Billy Moon]

works for me even clicking on an element, are you sure there are not other click handlers set on the element with bubbling disabled? That would stop the event from propogating right down to html..?

[Jim]

For test purposes, this is the only javascript code in the file (except jQuery itself). I've just a <h1> in the document. When clicking on the h1 it does not work and when clicking below it works. Using tap() from jQuery mobile works on both and there is not the dark flickering which is also not very useful in my case.

[Billy Moon]

strange that your results are different to mine, makes me worry that some of my code might not work on all iPad... as an aside, I generally don't use click events for touchscreen devices, but instead use touchstart as it fires faster (as soon as finger touches) rather than after a delay to decide what kind of click/swipe it is. If I have complex gestures, I might use library, of which there are several excellent ones to choose from.

[Jim]

My kind of use is rare. I use this general click detection to have a common way for closing drop down navigations when not clicking on them. Usually click() works great for elements.

[SuperUberDuper]

is there not a better solution to this in 2016?

[gw0]

Thanks, works perfectly on iOS 10, I use it to give autoplay to audio (which doesn't work otherwise on iOS since that browser requires touch interaction before playing any audio): <script type="text/javascript">var ev = 'click'; if ('ontouchstart' in window) { ev = 'touchstart'; }; document.addEventListener(ev, function() { document.getElementById('BESTSONGEVER').play(); });</script>