1

我正在使我的网站触摸友好，并创建了一个简单的轮播样式插件，效果很好，但是当触发 touchend 事件并且原始目标是图像（用户触摸图像然后滑动/向左导航）时，它仍在打开与图像关联的链接。

我已经输入了 event.stopPropagation() 和 event.preventDefault() 但它没有效果。

有谁知道如何防止这种情况？

编辑：

我正在使用以下方法绑定触摸事件：

obj.parent().bind('touchstart', onTouchStart);
obj.parent().bind('touchend', onTouchEnd);

这是touchend功能

function onTouchEnd(event) {
    if(!cdata.in_touch) return;
    cdata.in_touch = false;

    var pos = getPointerPosition(event);
    var final_distance = Math.sqrt(pos.x - cdata.touch_start);
    cdata.timer_end = new Date();
    cdata.timer_length = cdata.timer_end - cdata.timer_start;

    if(cdata.timer_length > 100) {
        if (final_distance > 100) {
            event.stopPropagation();
            event.preventDefault();
            // no effect, link associated with image still fires
            return;
        }
    }
}
4

1 回答 1

3

解决这个问题的一般技巧是倾听touchstart。一旦被触发，保存触摸 XY 坐标并为和touchstart附加监听器。侦听器应调用您要调用的指定回调（即全屏显示点击的图像）。应该监视从原始点击 XY 坐标移动的距离，如果它超过某个阈值，它会取消（以及现在的冗余事件）。touchendtouchmovetouchendtouchmovetouchendtouchmove

Google https://developers.google.com/mobile/articles/fast_buttons有一篇带有参考代码的优秀文章

此外，FTlabs 的一个名为 FastClick 的新 Github 项目更加全面； https://github.com/ftlabs/fastclick

于 2013-02-04T12:15:12.730 回答