iOS上的JavaScript:touchstart上的preventDefault，无需禁用滚动

我正在iOS上的UIWevView中使用JavaScript和jQuery

我添加了一些javascript事件处理程序，允许我捕获一个touch-and-hold事件，以便在有人点击img一段时间时显示消息：

$(document).ready(function() {

    var timeoutId = 0;
    var messageAppeared = false;

    $('img').on('touchstart', function(event) {

        event.preventDefault();
        timeoutId = setTimeout(function() {           

            /* Show message ... */
            messageAppeared = true;

        }, 1000);

    }).on('touchend touchcancel', function(event) {                                

        if (messageAppeared) {
            event.preventDefault();
        } else {
            clearTimeout(timeoutId);
        }
        messageAppeared = false;        
    });
});

这可以很好地显示信息。我添加了两行“event.preventDefault（）；”来停止链接内的IMG以触发链接

问题是：这似乎也阻止了拖动事件正常滚动页面，这样当用户在img上开始滑动时就无法滚动

---

如何在不干扰滚动的情况下禁用默认链接操作？

有时，您必须问一个有关堆栈溢出的问题才能自己找到答案。我的问题确实有一个解决方案，具体如下：

$(document).ready(function() {

    var timeoutId = 0;

    $('img').on('touchstart', function(event) {

        var imgElement = this;

        timeoutId = setTimeout(function() {           

            $(imgElement).one('click', function(event) {
                event.preventDefault();
            });

            /* Show message ... */

        }, 1000);

    }).on('touchend touchcancel', function(event) {                                
        clearTimeout(timeoutId);
    });
});

解释

• 触摸事件处理程序中没有preventDefault（）。这会恢复滚动行为（当然）
• 如果消息出现，请处理一次普通的单击事件，并阻止其默认操作

---

您可以查看一个手势库，它涵盖了设备上的所有主要手势事件。

您将我放在正确的轨道上，Stefan，让我从另一个角度思考。对于那些还在为之挠头的人，我的解决方案是这样的

我试图让访问者在不破坏垂直滚动的情况下水平滚动图像。但我正在执行自定义功能，等待垂直滚动发生。相反，我们应该先允许有规律的行为，然后像斯特凡那样等待特定的动作发生

例如：

$("img").on("touchstart", function(e) {
    var touchStart = touchEnd = e.originalEvent.touches[0].pageX;

    var touchExceeded = false;

    $(this).on("touchmove", function(e) {
        touchEnd = e.originalEvent.touches[0].pageX;

        if(touchExceeded || touchStart - touchEnd > 50 || touchEnd - touchStart > 50) {
            e.preventDefault();

            touchExceeded = true;

            // Execute your custom function.
        }
    });

    $(this).on("touchend", function(e) {
        $(this).off("touchmove touchend");
    });
});

所以基本上我们允许默认行为，直到水平移动超过50像素

touchExcepted

变量确保我们的函数在重新输入初始<50像素区域时仍然运行

---

（请注意，这是示例代码，

e.originalEvent.touchs[0]。pageX

不兼容跨浏览器。）

只是好奇，但这不应该是

one

而不是

touchend

上的

？我还没有尝试过这段代码，但似乎它可能会多次绑定到touchend，而touchstart与touchend的比例应该是1:1。问得好。它应该立即解除绑定（以及
touchmove
绑定），但是，
one
确实可以更有效地工作。请随便乱弄，看看什么最管用。我为这个问题发了言。。。。。希特