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

发布于 2024-10-08 19:10:21 字数 448 浏览 0 评论 0原文

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

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

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

但是，这不适用于“touchEnd”，因为 event.target 指向原始元素（在本例中为 buttonElement），而不是我释放触摸的元素。

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

原文

Say I have an button with a touchEnd event listener. If I touch the button, slide my finger out of the button and then release touch, I'd like to "cancel" the touch event.

This behaves correctly if I do the following using onClick:

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

However, this doesn't work with "touchEnd" because event.target points to the originating element (buttonElement in this case), not to the element where I released touch.

Is there a better generic way to do this besides doing something like setting a flag on "touchMove"? Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

北城孤痞 2024-10-15 19:10:21

使用触摸事件：touchstart、touchmove、touchcancel、touchend。请参阅 Apple 文档。

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

回复收藏 0 原文

谁的年少不轻狂 2024-10-15 19:10:21

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

我只是取消触摸移动时的默认操作。在我的 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!");
}

*将此函数添加到各自的事件侦听器中

I know the question is old, but I'm searching how to do the same thing, and I wrote a code that works, and if anyone need this later.

I just canceling the default action if the touch move. Works pretty well on my WebApp, and the feedback is much better than dealing with mouseup and mousedown events, on mobile safari is too slow.

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

*add this functions to theirs respective event listeners

回复收藏 0 原文