Question

假设我有一个带有touchEnd事件监听器的按钮。如果我触摸按钮，将手指滑出按钮然后松开触摸，我想“取消”触摸事件。

如果我使用onClick执行以下操作，则行为正确：

buttonElement.addEventListener('click', function (event) {
    if (event.target === this) {
    // Do something
    }
});

但是，这不适用于“touchEnd”，因为event.target指向原始元素（在这种情况下为buttonElement），而不是我发布的元素触摸。

除了在“touchMove”上设置标志之外，还有更好的通用方法吗？谢谢！

Answer 1

使用触摸事件：touchstart，touchmove，touchcancel，touchend。请参阅Apple docs。

无论如何，我认为我不会尝试取消该活动。在事件中，我会检查“光标”（手指）的位置，如果它在区域之外，则不要触发该功能。

Answer 2

我知道这个问题已经过时了，但我正在寻找如何做同样的事情，并且我编写了一个有效的代码，如果有人在以后需要这个代码。

我只是在触摸移动时取消默认操作。在我的WebApp上工作得很好，反馈比处理mouseup和mousedown事件要好得多，在移动safari上太慢了。

var moved=false;

function touchstart(){
    moved=false;
    //highlight button for feedback
}

function touchmove(){
    moved=true;
}

function touchend(){
    //undo-highlight the button

    if(moved) touchcanceled();
    else action();
}

function touchcanceled(){
    //user just flicked the button,
    //probably scrolling the view
}

function action(){
    alert("You triggered me!");
}

*将此功能添加到他们各自的事件监听器

Answer 3

很久以前，我只是想加上我的2c值，因为这个问题还没有接受答案。

touchCancel目前在移动平台上不太可靠。

请参阅： http://alxgbsn.co.uk/2011/12/23/different-ways-to-trigger-touchcancel-in-mobile-browsers/

或者你也可以像写Hammer.JS

那样编写你自己的事件叠加层。

这样你就可以在取消前确定手势的类型。

如何取消Mobile Safari上的触摸操作？

3 个答案: