Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

what is the proper way to trigger a touch event on the iPad with jquery

I have tried the following (.myviewer is a div)...

$('.myviewer').click();

  and
$('.myviewer').trigger('touchstart');

  and
$('.myviewer').trigger('click');

All work on a computer but not an iPad. What am I doing wrong?

Here is what the body of the html page looks like...

<body>
    <div class="myviewer" onclick="window.open('myPDFFile.pdf');">Programmatically clicked</div>
</body>

And to round this out here is my jquery code...

$(document).ready(function() {
var isMobile = {
    Android : function() {
        return navigator.userAgent.match(/Android/i) ? true : false;
    },
    BlackBerry : function() {
        return navigator.userAgent.match(/BlackBerry/i) ? true : false;
    },
    iOS : function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
    },
    Windows : function() {
        return navigator.userAgent.match(/IEMobile/i) ? true : false;
    },
    any : function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());                               }
}; 

if(isMobile.any()) {
    $('.myviewer').clck();  //this does works on computers but not on iPad
}else {
    var markup = "<object   data='myPDFFile.pdf#toolbar=1&amp;navpanes=1&amp;scrollbar=0&amp;page=1&amp;view=FitH' type='application/pdf' width='100%' height='100%'> </object>";
    $('.myviewer').append(markup);
};      

});

like image 549
user278859 Avatar asked Jun 03 '12 20:06

user278859


People also ask

What is trigger event in jquery?

The trigger() method triggers the specified event and the default behavior of an event (like form submission) for the selected elements. This method is similar to the triggerHandler() method, except that triggerHandler() does not trigger the default behavior of the event.

Does touch trigger click event?

Because mobile browsers should also work with with web applications that were build for mouse devices, touch devices also fire classic mouse events like mousedown or click . When a user follows a link on a touch device, the following events will be fired in sequence: touchstart. touchend.

What is touch start event?

The touchstart event is used to execute a script whenever the user touches an HTML element. On touching a particular element, if the touchstart event is associated with it, it can be used to trigger a javascript function. Note: The touchstart event works only on touch screen devices.

Which of the following is a touch event in html5?

Touch events consist of three interfaces ( Touch , TouchEvent and TouchList ) and the following event types: touchstart - fired when a touch point is placed on the touch surface. touchmove - fired when a touch point is moved along the touch surface. touchend - fired when a touch point is removed from the touch surface.


1 Answers

For .trigger to do anything, you must bind the event first, which you haven't done. onclick="" doesn't count.

To bind the event first use:

$(document).ready(function() {
    $('.myviewer').on( "touchstart", function(){
        $(this).remove();
    });

    var isMobile = { //...your original code continues here

Then you can later trigger it:

$('.myviewer').trigger('touchstart');
like image 100
Esailija Avatar answered Oct 04 '22 02:10

Esailija