How to change threshold of "touchmove" in js

Question

I just want to ask if there is a way to change the threshold of the event touchmove? In my PhoneGap App, an image will appear. If touchstart is triggered, another image will appear. If touchend or touchmove is triggered, all images must 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 of the number of pixels that is considered a touchmove is too little. Frequently, as soon as I press the image (not releasing it, touchend is not being triggered), the image disappears because the touchmove event is triggered. Is there a way to change the number of pixels of moved that is considered as touchmove? Or there are other workarounds?

Answer 1

You need to modify this property

• $.vmouse.moveDistanceThreshold (default: 10px) – More than this, then it is a scroll event. The vmousecancel event is called and the TouchMove event is cancelled.

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 this Official Documentation

Answer 2

You can't change the default behavior of the browser, but you can use the event data to filter out small movements that you want to suppress. The touch attribute of the event parameter gives position information. See the docs for full details.

Save the position on start and compare the position on touchmove. Remove the items from the page only if greater than the threshold that you set.

  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's a Working fiddle