Mousedown Event with ipad / iphone compatibility? - jQuery Mobile

Question

I wrote a small scroller in jquery. The scroller seems to work fine on PC and Mac. However, it does not work on touch devices.

I assume this is due to the mousedown property being called. How can I do this work on both PC and touch screen devices?

thanks

 $('.scroll-nav-up, .scroll-nav-down').live('click', function(){ $('.scroller-wrap').stop(); return false; }); $('.scroll-nav-up').live('mousedown', function(){ $(this).closest('.item').find('.scroller-wrap').animate({ top: -($(this).closest('.item').find('.scroller-wrap').height() - 250) }, 800); }); $('.scroll-nav-down').live('mousedown', function(){ $(this).closest('.item').find('.scroller-wrap').animate({ top: 0 }, 800); }); 

Answer 1

Nothing special was found, so at the moment I'm using 2 scripts. The first script identifies touch-screen devices written by Alastair Campbell on Touch Browser Detection .

 function isTouchDevice() { var el = document.createElement('div'); el.setAttribute('ongesturestart', 'return;'); if(typeof el.ongesturestart == "function"){ return true; }else { return false } } 

and then use the mousedown event for regular browsers and use the tap event for touchscreen devices.

PS - Using jQuery and jQuery Mobile

Answer 2

If you are using jquery mobile, try handling its new tap and taphold

http://jquerymobile.com/demos/1.0a2/#docs/api/events.html

I cannot test it, so this is just an idea (I'm not sure if I understand what your application is doing), but you can try and change the click on the mouseup event.