javascript - 元素上的 jQuery touchSwipe 事件阻止滚动

Question

我有一些垂直排列的 div 元素列表。使用jQuery TouchSwipe plugin添加了滑动事件以捕捉左右滑动。想法是通过像这样向左或向右滑动来从列表中删除元素:

最后我得到了这样的东西:

$(function() {

  $('.swElement').swipe({
      swipeStatus: function(event, phase, direction, distance, duration, fingerCount) {
        console.log(distance);
        if (phase == "move") {
          if (direction == "right") {
            $(this).css({
              'right' : (distance*-1)+'px'
            });  
          }
        } else if (phase == "cancel") {
          $(this).css({
              'right' : 0
          });
        } else if (phase == "end") {
          $(this).animate({
              'right' : '-100%'
          }, 200, function() {
             $(this).remove();
          });
        } else {
           //?????
        }
      },
      threshold: 150,
      maxTimeThreshold: 5000,
	  fingers: 'all'
  });
  
});

.swElement {
  display: block;
  width: 100%;
  height: 50px;
  border: 1px solid black;
  box-sizing: border-box;
  padding: 0 10px;
  line-height: 50px;
  cursor: pointer;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/2130702/cdn/jquery.touchSwipe.min.js"></script>

<h2>Swipe right to remove element</h2>

<div class="swElement">Element</div>
<div class="swElement">Element</div>
<div class="swElement">Element</div>
<div class="swElement">Element</div>
<div class="swElement">Element</div>

问题

它在移动 chrome 浏览器上运行良好，但会阻止在原生 android 浏览器上向上/向下滚动。

我知道这个 swipeStatus 捕捉左/右和上/下方向，但不知道如何防止它 - 我只需要右滑动事件。

有什么想法吗？提前致谢。

更新

我不能使用 jQuery 移动框架，因为它与我必须使用的其他脚本冲突。也许会有另一种方法可以弄清楚？

Answer 1

这并没有回答您问题的实际问题，而是触摸堵塞的替代方法。您仍然可以将它们用于同一应用或网站中的其他用途。

巧合的是，前几天我正在看这个 (jquery-mobile-swipe-list) https://github.com/ksloan/jquery-mobile-swipe-list/blob/master/index.html和这个演示 http://jsbin.com/luzunu/1/edit?html,css,js,output它使用一些数学来检测水平触摸。

我创建了两个演示。一个可以揭示元素背后的内容，例如您问题中的图片，另一个可以像您拥有的代码一样通过拖动/滑动来删除。

使用 -webkit-transform: translateZ(0); transform: translateZ(0); 元素闪烁的任何问题修复闪烁。

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

https://jsfiddle.net/4gk27ru1/

代码

    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

如果触摸到正像素，则将元素从左向右移动 (---->)。从右到左的相反方向 (<-----) 小于 1 个像素，即 (x < 1)

if (x > 1) { 
 slide(x);
  }

https://jsfiddle.net/v5Ldovmj/

演示2滑动删除

https://jsfiddle.net/afkdtjh9/

添加

// detect window width to fly out the items from whatever the devices window  width is. 

var itemwidth = $(window).width();

// slide item to windows width wait half a second, slide it up and remove from the DOM

slide(itemwidth);
setTimeout(function() {
$(itemis).slideUp("fast").remove()
}, 500);

您可以使用jquery animate 或类似velocity js 的插件来控制元素移动的速度，因此它更平滑，因为使用css transform 本身感觉非常快