CODEWITHSUNDEEP
javascriptjquerycordovadom-events
Jeongbebs
Jeongbebs

Reputation: 4120

How to change threshold of "touchmove" in js

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?

Upvotes: 7

Views: 4653

Answers (4)

kindasimple
kindasimple

Reputation: 2427

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

Upvotes: 2

Surajit Sarkar
Surajit Sarkar

Reputation: 1444

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

Upvotes: 4

hon2a
hon2a

Reputation: 7214

Store last touch coordinates in element data and trigger 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)
    }
});

Upvotes: 1

alessandrio
alessandrio

Reputation: 4370

need not find the class, if there is 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;
});

Upvotes: 1

Related Questions