微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

我正在尝试向我的移动页面添加滑动功能,我尝试了锤子.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";
};

有任何想法吗???

解决方法:

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

如果您想使用一个库,则可能需要将其打开,因为您将需要防止使用认值,以防止在使用触摸事件时页面跳到各处,但有时您想根据需要忽略它防止页面停留在静态位置,遮挡其他内容.

理想情况下,您希望在处理程序中添加一个子句,以指示它们是否防止浏览器在收到事件后执行认行为.

例如,滑动是一种应在短时间内发生的行为(例如,如果您将手指从一个区域移到另一区域而不是例如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偏移量)来检测用户是在向左还是向右,向上还是向下移动(例如,如果您有一个可水平滑动的轮播(认行为被阻止,因此页面在水平方向上不会上下移动)滚动),但当用户明显在垂直轴之间拖动页面时,希望页面垂直滚动).

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐