Javascript 如何更改“的阈值”；touchmove"；在js中

我只是想问一下，是否有办法更改事件的阈值

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

的移动像素数？或者还有其他解决方法吗？

如果没有也不会出错，则不需要找到该类

---

不能更改浏览器的默认行为，但可以使用事件数据过滤掉要抑制的小动作。事件参数的

touch

属性提供位置信息。有关详细信息，请参阅

开始时保存位置并在触摸移动时比较位置。仅当大于设置的阈值时，才从页面中删除项目

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

---

这里有一个

您需要修改此属性

• $.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>

$（document）.bind（“mobileinit”，function（）{
$.vmouse.moveDistanceThreshold（默认值：20px）
});

---

看看这个

将最后一次触摸坐标存储在元素数据中，并仅在其变化显著时触发

触摸移动

处理程序

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

---

你好@kindasimple。我在这个小提琴

http://jsfiddle.net/achudars/fq75t/

。但是，这不适用于我的项目，因为我有5个div共享

greenapple

类和

活动类或
隐藏类。场景是，弹出一个div，触发touchstart并存储坐标。但是，我仍然有4个div必须能够存储touchstart坐标，这是这种方法无法做到的。我可以详细解释。我不确定我是否理解你的问题。您有一个接触点阵列，因此如果您与多个div交互，您可以访问多个接触点。您只需在阵列上执行距离计算，而不仅仅是第一个接触点。这个答案看起来很有希望。可以链接到我可以测试它的地方吗？看看这个TouchWipe插件的演示，在这里你可以玩阈值距离。下面的链接中提供了配置阈值距离的文档。
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)
    }
});