Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 777
Jim Avatar asked Jun 18 '11 17:06

Jim


5 Answers

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) {
    ...
});
like image 174
guigouz Avatar answered Nov 04 '22 01:11

guigouz


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! :)

like image 38
mlhDev Avatar answered Nov 04 '22 02:11

mlhDev


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]; 
like image 5
namretiolnave Avatar answered Nov 04 '22 01:11

namretiolnave


You may use the touchstart event instead.

like image 4
Thariama Avatar answered Nov 04 '22 03:11

Thariama


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

This works for me, I tested it now.

Even works with no content on page, wherever you click on the page.

like image 2
Billy Moon Avatar answered Nov 04 '22 03:11

Billy Moon