JQuery Mobile - controller sensitivity change

Question

I have a problem with the jQuery mobile app that I am developing on my Android.

Often, when I just want to scroll through the list of elements, pressing a button even on the element that I touch is triggered.

This is very unpleasant for my users.

What can i do with this?

Can I change the sensitivity of the taphold event?

Sorry, I can’t find anything on Google.

Thanks,
Dan

Answer 1

In jQuery-mobile 1.1. * They added more convenient ways to configure touch events: http://jquerymobile.com/demos/1.1.1/docs/api/events.html

For a breakpoint, you can change the time that the crane must stand before the event $.event.special.tap.tapholdThreshold setting the value to $.event.special.tap.tapholdThreshold .

This value must be set in the mobileinit event before importing JQM, but after importing jQuery. For example, I did the following to avoid matches between swipe and taphold events:

 <script type="text/javascript" src="/Scripts/jquery.min.js"></script> <!-- JQM default options must be set after jQuery and before jQuery-mobile --> <script type="text/javascript"> $(document).bind("mobileinit", function () { $.event.special.tap.tapholdThreshold = 1000, $.event.special.swipe.durationThreshold = 999; }); </script> <script type="text/javascript" src="/Scripts/jquery.mobile-1.1.0.js"></script> 

Answer 2

See source: http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js

Find the tap event (starts at line 1049):

 $.event.special.tap = { 

In line 1090 - 1092:

 timer = setTimeout(function() { triggerCustomEvent( thisObject, "taphold", $.Event( "taphold" ) ); }, 750 ); 

Change the delay of the taphold event.

 750ms = 0.75s 

1000 is .....

 1000 is equal to 1 second 

To comment

Override the special click event with the new timer settings: bound from 750 to 1000

This code can be placed after enabling script af jQuery mobile ( <script src='jquery.mobile.js'></script> and then <script>$.event.special.tap = {...}</script> )

 $.event.special.tap = { setup: function() { var thisObject = this, $this = $( thisObject ); $this.bind( "vmousedown", function( event ) { if ( event.which && event.which !== 1 ) { return false; } var origTarget = event.target, origEvent = event.originalEvent, timer; function clearTapTimer() { clearTimeout( timer ); } function clearTapHandlers() { clearTapTimer(); $this.unbind( "vclick", clickHandler ) .unbind( "vmouseup", clearTapTimer ) .unbind( "vmousecancel", clearTapHandlers ); } function clickHandler(event) { clearTapHandlers(); // ONLY trigger a 'tap' event if the start target is // the same as the stop target. if ( origTarget == event.target ) { triggerCustomEvent( thisObject, "tap", event ); } } $this.bind( "vmousecancel", clearTapHandlers ) .bind( "vmouseup", clearTapTimer ) .bind( "vclick", clickHandler ); timer = setTimeout(function() { triggerCustomEvent( thisObject, "taphold", $.Event( "taphold" ) ); }, 1000 ); // Changed from 750 to 1000 }); } };