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

Allow vertical scrolling with touchstart when event.preventDefault enabled

本文关键字：touchstart 滚动 垂直 启用 event preventDefault      更新时间：2023-09-26

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

我正在尝试向我的移动页面添加滑动功能，我已经尝试了锤子.js、滑动等框架.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";
};

有什么想法吗???

这是一个

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

如果你想使用一个库，你可能需要破解它，因为你需要阻止默认值，以防止页面在使用触摸事件时到处跳转，但在其他时候你想省略它，因为你想防止页面保持在静态位置， 遮盖其他内容。

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

例如，滑动

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

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

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

将滑动和滚动组合在一起的示例页面：http://labs.rampinteractive.co.uk/touchSwipe/demos/Page_scrolling.html

相关文章：