How to change touchmove threshold in js

Question

I just want to ask if there is a way to change the threshold of the touchmove event? An image will appear in the PhoneGap application. If touchstart triggered, another image will appear. If touchend or touchmove , all images should disappear. Here is my code:

 $('.greenApple').on('touchend', function (e){ $('body').find('.active').removeClass('active'); $('body').find('.greenApple').addClass('hidden'); flag = true; return; }); $('.greenApple').on('touchmove', function (e){ $('body').find('.active').removeClass('active'); $('body').find('.greenApple').addClass('hidden'); flag = true; return; 

However, the threshold for the number of pixels considered to be touchmove is too small. Often, as soon as I click on the image (without releasing it, touchend does not start), the image disappears because the touchmove event touchmove . Is there a way to change the number of pixels that are considered touchmove ? Or are there other workarounds?

Thanks.

Answer 1

You need to change this property.

• $. vmouse.moveDistanceThreshold (default: 10px). Moreover, this is a scroll event. The vmousecancel event is raised and the TouchMove event is canceled.

Try the code below:

 <script src="jquery.js"></script> <script> $(document).bind("mobileinit", function(){ $.vmouse.moveDistanceThreshold (default: 20px) }); </script> <script src="jquery-mobile.js"></script> 

Take a look at the white papers

Answer 2

You cannot change the default behavior of the browser, but you can use event data to filter out small movements that you want to suppress. The event attribute's touch attribute provides location information. See docs for more details.

Save the position at startup and compare the position on the touch panel. Only remove items from the page if you have exceeded the threshold.

  var flag, x,y, distance = 25; $('.greenApple').on('touchstart', function (e){ x = e.originalEvent.changedTouches[0].pageX y = e.originalEvent.changedTouches[0].pageY }); $('.greenApple').on('touchmove', function (e){ var deltaX = e.originalEvent.changedTouches[0].pageX - x; var deltaY = e.originalEvent.changedTouches[0].pageY - y; var difference = (deltaX * deltaX) + (deltaY * deltaY) if(Math.sqrt(difference) > distance) { $('body').find('.active').removeClass('active'); $('body').find('.greenApple').addClass('hidden'); flag = true; }); 

Here is the working violin

Answer 3

no need to look for a class if not and will not do anything wrong

 $('button').on('touchend', function (e){ /*no function whatsoever*/ console.log($("body").find('.active').first().html()); console.log($("body").find('.active').html()); /*only here*/ console.log($("body").html()); /*just do it this way*/ $('body').removeClass('active'); $('body').addClass('hidden'); flag = true; return; }); 

Answer 4

Save the last touch coordinates in data items and run the touchmove handler only when their change is significant.

 var treshold = 12345; // set whatever treshold you like function storeLastTouch (element, event) { element.data('lastTouch', event.originalEvent.changedTouches); } $('.greenApple').on('touchstart', function (event) { storeLastTouch($(this), event); }); $('.greenApple').on('touchmove', function (event) { var lastTouch = $(this).data('lastTouch'), thisTouch = event.originalEvent.changedTouches, delta = ...; // calculate difference in any metric you like if (delta > treshold) { storeLastTouch($(this), event); // ... (perform your handler logic) } });