Question

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

我添加了一些javascript事件处理程序，它允许我捕获一个触摸并保持事件，以便在有人点击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（）;”用于阻止链接中的imgs以触发链接的行。

问题是：这似乎也阻止了拖动事件滚动页面正常发生，因此当他的滑动恰好在img上开始时用户将无法滚动。

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

Answer 1

你让我走上正确的轨道Stefan，让我思考另一种方式。对于仍然对此感到头疼的人，这是我的解决方案。

我试图允许访问者水平滚动图像，而不会破坏垂直滚动。但我正在执行自定义功能并等待垂直滚动发生。相反，我们应该首先允许常规行为并等待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像素。

如果我们重新输入初始值，touchExceeded变量确保我们的函数仍然运行。 50像素区域。

（注意这是示例代码，e.originalEvent.touches[0].pageX不兼容浏览器。）

Answer 2

有时您必须在堆栈溢出问题上提出问题，以便自己找到答案。我的问题确实有一个解决方案，如下：

$(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（）。这会带回滚动行为（当然）。
如果出现消息，请处理正常点击事件一次，并阻止默认操作。

Answer 3

你可以看一下像hammer.js这样的手势库，它涵盖了跨设备的所有主要手势事件。

iOS上的JavaScript：在touchstart上使用preventDefault而不禁用滚动

3 个答案:

说明