Javascript 元素上的jQuery TouchWipe事件阻止滚动

我有一些垂直排列的

div

元素列表。使用添加的滑动事件捕捉左右滑动。其想法是通过向左或向右滑动元素，将其从列表中删除，如下所示：

最后我得到了这样的结果：

$（函数（）{
$（'.sweement'）。轻扫({
swipeStatus：功能（事件、阶段、方向、距离、持续时间、手指计数）{
控制台日志（距离）；
如果（相位=“移动”）{
如果（方向=“右”）{
$（this.css）({
“右”：（距离*-1）+“px”
});  
}
}否则如果（阶段=“取消”）{
$（this.css）({
“右”：0
});
}否则如果（阶段=“结束”）{
$（此）。设置动画({
‘正确’：‘100%’
}，200，函数（）{
$（this.remove（）；
});
}否则{
//?????
}
},
阈值：150，
maxTimeThreshold:5000，
手指：“全部”
});
});
膨胀{
显示：块；
宽度：100%；
高度：50px；
边框：1px纯黑；
框大小：边框框；
填充：0 10px；
线高：50px；
光标：指针；
位置：相对位置；
}

向右滑动以删除元素
元素
元素
元素
元素
元素
这不是回答您问题的实际问题，而是触摸式插拔的替代方案。您仍然可以在同一应用程序或网站中使用它们进行其他操作

巧合的是，前几天我正在看这个（jquerymobileswipe列表）和这个演示，它使用一些数学来检测水平触摸

我创建了两个演示。一个显示元素背后的内容，如问题中的图片，另一个拖动/滑动以删除，如代码中的内容

使用
-webkit transform:translateZ（0）时元素闪烁的任何问题；变换：translateZ（0）修复闪烁

演示拖动/滑动以显示后面。我设置了5秒的延迟，以便触摸事件开始


代码

    var startPos;
    var handlingTouch = false;
    var itemis;
    setTimeout(function() {

    document.addEventListener('touchstart', function(e) {
      // Is this the first finger going down? 

      if (e.touches.length == e.changedTouches.length) {
        startPos = {
          x: e.touches[0].clientX,
          y: e.touches[0].clientY
        };
      }
    });

    document.addEventListener('touchmove', function(e) {
      // If this is the first movement event in a sequence:
      if (startPos) {
        // Is the axis of movement horizontal?
        if (Math.abs(e.changedTouches[0].clientX - startPos.x) > Math.abs(e.changedTouches[0].clientY - startPos.y)) {
          handlingTouch = true;
          e.preventDefault();
          onSwipeStart(e);
        }
        startPos = undefined;
      } else if (handlingTouch) {
        e.preventDefault();
        onSwipeMove(e);
      }
    });

    document.addEventListener('touchend', function(e) {
      if (handlingTouch && e.touches.length == 0) {
        e.preventDefault();
        onSwipeEnd(e);
        handlingTouch = false;
      }
    });



    function slide(x) {

// slide the element

    $(itemis).css({transform: "translatex("+x+"px)"})
    }

    var swipeOrigin, x, itempos;
    function onSwipeStart(e) {

// find what element is been touched. In your case it may be closest("swElement") but you need to test

      itemis = $(e.target).closest("li").find(".move")

      swipeOrigin = e.touches[0].clientX;
    }
    function onSwipeMove(e) {
      x = e.touches[0].clientX - swipeOrigin;
      slide(x);
    }
    function onSwipeEnd(e) {

    //On Touch End if x (distance traveled to the right) is greater than +35 pixels then slide element  +100 pixels.

      if (x > 35) { 
    slide(100);
      }
      else {
      slide(0);
    }
    }
    }, 5000);

因为像素的移动是正数或负数，所以在使用
if
语句时，可以很容易地防止元素从任意一侧移动。可以使用
if/else if

Example

如果触摸到正像素，则从左向右移动元素（-->）。从右到左的相反方式（这不是回答您问题的实际问题，而是触摸式插拔的替代方法。您仍然可以在同一应用程序或网站中使用触摸式插拔进行其他操作

巧合的是，前几天我正在看这个（jquerymobileswipe列表）和这个演示，它使用一些数学来检测水平触摸

我创建了两个演示。一个显示元素背后的内容，如你问题中的图片，另一个拖动/滑动以删除，如你的代码中的内容

使用
-webkit transform:translateZ（0）；transform:translateZ（0）；
修复闪烁的元素的任何问题

演示拖动/滑动以显示后面。我延迟了5秒，触摸事件开始


代码

    var startPos;
    var handlingTouch = false;
    var itemis;
    setTimeout(function() {

    document.addEventListener('touchstart', function(e) {
      // Is this the first finger going down? 

      if (e.touches.length == e.changedTouches.length) {
        startPos = {
          x: e.touches[0].clientX,
          y: e.touches[0].clientY
        };
      }
    });

    document.addEventListener('touchmove', function(e) {
      // If this is the first movement event in a sequence:
      if (startPos) {
        // Is the axis of movement horizontal?
        if (Math.abs(e.changedTouches[0].clientX - startPos.x) > Math.abs(e.changedTouches[0].clientY - startPos.y)) {
          handlingTouch = true;
          e.preventDefault();
          onSwipeStart(e);
        }
        startPos = undefined;
      } else if (handlingTouch) {
        e.preventDefault();
        onSwipeMove(e);
      }
    });

    document.addEventListener('touchend', function(e) {
      if (handlingTouch && e.touches.length == 0) {
        e.preventDefault();
        onSwipeEnd(e);
        handlingTouch = false;
      }
    });



    function slide(x) {

// slide the element

    $(itemis).css({transform: "translatex("+x+"px)"})
    }

    var swipeOrigin, x, itempos;
    function onSwipeStart(e) {

// find what element is been touched. In your case it may be closest("swElement") but you need to test

      itemis = $(e.target).closest("li").find(".move")

      swipeOrigin = e.touches[0].clientX;
    }
    function onSwipeMove(e) {
      x = e.touches[0].clientX - swipeOrigin;
      slide(x);
    }
    function onSwipeEnd(e) {

    //On Touch End if x (distance traveled to the right) is greater than +35 pixels then slide element  +100 pixels.

      if (x > 35) { 
    slide(100);
      }
      else {
      slide(0);
    }
    }
    }, 5000);

由于像素的移动是正或负的，因此在使用
if
语句时，可以很容易地防止元素从任一侧移动。其他条件可以使用
if/else if

Example

如果触摸到正像素，则将元素从左向右（-->）移动。从右向左的相反方向(
防止向左滑动时发生任何事件

防止向左滑动时发生任何事件
这比上面的所有答案都要简单。只需添加此参数，即可：

    allowPageScroll:"vertical"

它比上面的所有答案都简单。只需添加此参数，您就可以开始了：

    allowPageScroll:"vertical"

感谢您的回答，感谢您为这么大的回答花费的时间。不幸的是，我忘了提到我不能使用jQuery移动框架。它与我必须使用的其他框架冲突。考虑到您的回答，我将尝试找出其他方法。非常感谢。@zur4ik您不需要JQM。代码是纯Javascript和一些jQuery，因此它是正确的可以用于任何东西和任何触摸设备。我只是将JQM用于简单的花式列表项。我将使用div和JQM@zur4ik做一个简单的演示，这里不使用JQM@zur4ik——只使用普通html，不使用框架。正如我在本例的回答中提到的（-webkit transform:translateZ（0）；transform:translateZ（0）；）很方便，因为如果没有它，div的定位会在拖动时引起闪烁。谢谢！你太棒了！@zur4ik没问题。我对某些应用程序使用TouchWipe和hammer js，但了解普通javascript touch事件会利用插件的使用，在某些情况下会更好，这样你的应用程序就不会因为不必要的代码而变得臃肿虽然这两种触摸插件都非常好。谢谢你的回答，也谢谢你花时间来回答这么大的问题。不幸的是，我忘了提到我不能使用jQuery mobile framework。它与我必须使用的其他插件冲突。考虑到你的答案，我将尝试找出其他方法。非常感谢。@zur4ik你不需要JQM。code是纯Javascript和一些Jquery，因此它可以用于任何东西和任何触摸设备。我只是使用JQM来处理简单的花式列表项。我将使用div和JQM@zur4ik来做一个简单的演示，这里不使用JQM@zur4ik——只使用纯html，不使用框架。正如我在本例的回答中提到的（-webkit transform:translateZ（0）；transform:translateZ（0）；）很方便，因为如果没有它，divs的定位会在拖动时引起闪烁。谢谢！你太棒了！@zur4ik没问题。我在某些应用程序中使用TouchWipe和hammer js，但了解普通javascript触摸事件会利用插件的使用，在某些情况下，它会更好地让你的