Question

我正在尝试创建一个按钮，可以响应地切换打开和关闭，但如果用户然后尝试滚动则不会切换。

起初我只是使用了一个点击事件，它允许我滚动而不会意外按下按钮，但是当试图让按钮切换时，存在太多的延迟。

这是我尝试使用的代码：

$('.cut-btn').on('touchstart click', function(e){
            e.stopPropagation(); e.preventDefault();
            $(this).toggleClass('cut');
        });
        $('.cut-btn').on('touchcancel', function(e){
            e.stopPropagation(); e.preventDefault();
            $(this).removeClass('cut');
        });

我看到有人提到触摸屏，但我不确定它是如何工作的。

使用touchstart可以让我快速响应，但是如果我意外按下按钮区域并尝试滚动，那么它会打开按钮，这就是我想要避免的。

Answer 1

通常你需要听touchstart，touchmove和touchend。

您需要保存touchstart的坐标，并将它们与touchmove给出的坐标进行比较。如果Y滚动值（我在这里假设一个标准的垂直滚动网站）高于给定的阈值，那么你设置一个参数来取消事件，并在触摸结束时这样做。

下面的简单示例，以及JSBin。

var btn = document.querySelector('button');
var activeTouches = {};

btn.addEventListener("touchstart", function touchStart(event) {
    var touches = event.changedTouches;

  for(var i = 0; i < touches.length; i++) {
    // Store the event on touchstart
    activeTouches[ "$" + touches[i].identifier ] = {
      identifier: touches[i].identifier,
      pageY: touches[i].pageY,
      dY: 0,
      cancelled: false
    };
  }
});

btn.addEventListener("touchmove", function touchMove(event) {
    var touches = event.changedTouches;

    for( var i=0; i<touches.length; i++ ) {
        // Compare it on touchmove
        var theTouch = activeTouches[ "$" + touches[i].identifier ];
        theTouch.dy = touches[i].clientY - theTouch.pageY;

        if ( theTouch.dy > 30 || theTouch.dy < -30 ) {
            theTouch.cancelled = true;
        }
    }
});


btn.addEventListener("touchend", function touchEnd(event) {
    var touches = event.changedTouches;

  for(var i=0; i<touches.length; i++) {
    // Check it on touchend
    var theTouch = activeTouches[ "$" + touches[i].identifier ];      

    if ( theTouch.cancelled === true ) {
        console.log('Scrolled, do not submit');
    } else {
        console.log('OK, let us send that!')
    }
  }
});

移动手指时如何取消touchstart事件

1 个答案: