Question

我只是想问一下是否有办法改变事件touchmove的门槛？在我的PhoneGap应用程序中，将出现一个图像。如果触发touchstart，则会显示另一张图片。如果触发了touchend或touchmove，则所有图片都必须消失。这是我的代码：

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

但是，被视为touchmove的像素数阈值太少。通常，只要我按下图像（不释放它，touchend没有被触发），图像就会消失，因为触发了touchmove事件。有没有办法改变被视为touchmove的移动像素数？还是有其他解决方法？

感谢。

Answer 1

您需要修改此属性

$。vmouse.moveDistanceThreshold（默认值：10px） - 不仅如此，它还是一个滚动事件。调用vmousecancel事件并取消TouchMove事件。

尝试以下代码：

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

看看这个Official Documentation

Answer 2

您无法更改浏览器的默认行为，但可以使用事件数据过滤掉要抑制的小移动。事件参数的touch属性提供位置信息。有关详细信息，请参阅docs。

在开始时保存位置并比较touchmove上的位置。仅当大于您设置的阈值时才从页面中删除项目。

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

这是Working fiddle

Answer 3

无需找到班级，如果没有，也不会做错什么

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

将最后的触摸坐标存储在元素数据中，并仅在其变化很大时触发touchmove处理程序。

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

如何在js中改变“touchmove”的阈值

4 个答案: