5

我目前在启用 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";
};

有任何想法吗？？？

4

2 回答 2

2

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

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

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

例如，滑动是一种应该在短时间内发生的行为（例如，如果您将手指从一个区域移动到另一个区域需要一整秒，而不是 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 偏移量（相对于start X offset）来检测用户是向左还是向右或向上或向下移动（例如，如果您有一个可以水平滑动的轮播（默认行为被阻止，因此页面不会在水平期间向上/向下移动）滚动）但希望页面在用户明显在垂直轴之间拖动页面时垂直滚动）。

于 2013-10-04T12:08:02.503 回答
1

图书馆 jquery.touchSwipe 解决了这个问题。

库：https ://github.com/mattbryson/TouchSwipe-Jquery-Plugin

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

于 2014-05-01T13:45:12.897 回答