Question

我正在使我的网站触摸友好并且已经创建了一个简单的旋转木马风格插件，效果很好，但是当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;
        }
    }
}

Answer 1

解决此问题的一般方法是收听touchstart。触发touchstart后，保存触摸X-Y坐标并附加touchend和touchmove的侦听器。 touchend侦听器应调用您要调用的指定回调（即以全屏显示所点击的图像）。 touchmove应监控从原始水龙头XY坐标移动的距离，如果超过某个阈值，则会取消touchend（以及现在冗余的touchmove事件）。< / p>

Google上有一篇很好的参考代码文章 https://developers.google.com/mobile/articles/fast_buttons

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

jquery - touchend preventDefault如果原始目标是链接/图像

1 个答案: