启用 event.preventDefault 时允许使用 touchstart 垂直滚动

Question

我目前在启用 event.preventdefault 时允许垂直滚动出现问题。

我正在尝试向我的移动页面添加滑动功能，我尝试过像hammer.js、swipe.js 等这样的框架，并且所有这些框架都需要启用 event.preventDefault 来检测左右滑动。

当 event.preventDefault 启用时，滑动检测完美，但是当您在该元素上时，您将失去垂直滚动的能力。 即，当您的手指开始滑动元素时，您无法在移动设备上上下移动屏幕。

我尝试构建自己的小脚本，效果很好，但又出现了垂直滚动的问题，这是一个问题。

var el = document.getElementById('navigation');
el.ontouchstart = function(e){
        e.preventDefault();
        el.innerHTML = "touch start";
};
el.ontouchend = function(e){
        el.innerHTML = "touch end";
};
el.ontouchmove = function(e){
        el.innerHTML = "touch moved";
};

el.ontouchcancel = function(e){
        el.innerHTML = "touch cancel";
};

有任何想法吗？？？

Answer 1

这是一个常见的问题，您希望本机浏览器行为与人们期望从触摸屏设备获得的交互行为一起工作。

如果您想使用一个库，您可能需要将其打开，因为您将需要阻止默认设置以防止页面在使用触摸事件时到处跳转，但在其他时候，您想根据需要省略它防止页面停留在静止位置，遮挡其他内容。

理想情况下，您希望向处理程序添加一个子句，指示它们是否阻止浏览器在接收到事件时执行的默认行为。

例如，滑动是一种应该在短时间内发生的行为（例如，如果您将手指从一个区域移动到另一个区域需要一整秒而不是 120 毫秒，那么您实际上并不是在滑动, 但拖动。考虑时间框架可能会在这里帮助你，例如：

var threshold = 150, interactionStart;

el.ontouchstart = function( e )
{
    // store timestamp of interaction start
    interactionStart = +new Date;
};

el.touchmove = function( e )
{
    // get elapsed time in ms since start
    var delta = +new Date - interactionStart;

    if ( delta > threshold )
    {
        e.preventDefault();
    }
    else {
        // super cool magic here
    }
};

150 毫秒是否是您想要的阈值取决于操作，正如您所看到的，您的问题没有固定答案，因为实际实现取决于您的应用程序在触摸交互方面的需求。

您还可以考虑在用户沿垂直轴滚动更多时不阻止事件默认值（即比较事件 Y 偏移量的增量位置（相对于起始 Y 偏移量）是否大于事件 X 偏移量（相对于开始 X 偏移）来检测用户是向左或向右或向上或向下移动（例如，如果您有一个可以水平滑动的轮播（默认行为被阻止，因此页面在水平期间不会向上/向下移动）滚动）但希望页面在用户明显在垂直轴之间拖动页面时垂直滚动）。

Answer 2

库 jquery.touchSwipe 解决了这个问题。

图书馆： https : //github.com/mattbryson/TouchSwipe-Jquery-Plugin

滑动和滚动相结合的示例页面： http : //labs.rampinteractive.co.uk/touchSwipe/demos/Page_scrolling.html