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 ms是否是您想要的阈值取决于操作，因为您的问题没有固定的答案，因为实际实施取决于您的应用程序在触摸交互方面的需求。

当用户沿垂直轴滚动更多时，您还可以考虑不阻止事件默认值（即比较事件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

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

2 个答案: