Jak zmienić próg "touchmove" w js

Question

Chcę tylko zapytać, czy istnieje sposób na zmianę progu zdarzenia touchmove? W mojej aplikacji PhoneGap pojawi się obraz. Jeśli zostanie wyzwolony touchstart, pojawi się inny obraz. Jeśli zostanie wyzwolony touchend lub touchmove, wszystkie obrazy muszą zniknąć. Tu jest mój kodu:

$('.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; 

Jednak próg liczby pikseli, który jest uważany za touchmove jest zbyt mało. Często, gdy tylko naciśniesz obraz (nie zwalniając go, touchend nie jest wyzwalany), obraz znika, ponieważ zostanie wywołane zdarzenie . Czy istnieje sposób zmiany liczby przeniesionych pikseli, która jest uważana za touchmove? Czy są inne sposoby obejścia problemu?

Dzięki.

Answer 1

nie musi znaleźć klasę, jeśli nie ma i nic złego nie zrobi

$('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 2

Nie można zmienić domyślne zachowanie przeglądarki, ale można korzystać z danych o zdarzeniach do filtrowania małe ruchy, które chcesz stłumić. Atrybut touch parametru zdarzenia podaje informacje o położeniu. Zobacz docs, aby uzyskać szczegółowe informacje.

Zapisz pozycję na początku i porównaj pozycję na touchmove. Usuń elementy ze strony tylko wtedy, gdy jest większy od ustawionego progu.

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; 
    }); 

Oto Working fiddle

Answer 3

Trzeba zmodyfikować tę właściwość

• $ .vmouse.moveDistanceThreshold (domyślnie: 10px) - Ponad to, to jest to wydarzenie przewijania. Zdarzenie vmousecancel jest wywoływane, a zdarzenie TouchMove jest anulowane.

Wypróbuj poniższy kod:

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

Spójrz na tym Official Documentation

Answer 4

Store ostatnim kontakcie współrzędne danych elementów i wywołać touchmove obsługi tylko wtedy, gdy ich zmiana jest znacząca.

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) 
    } 
});