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

概述我目前在启用event.preventdefault时允许垂直滚动时遇到问题.我正在尝试向我的移动页面添加滑动功能,我尝试了锤子.js,swipe.js等可能的框架,并且所有这些都需要启用event.preventDefault来检测左右滑动.启用event.preventDefault时,滑动可完美检测,但是当您位于该元素上时,您将

我目前在启用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偏移量)来检测用户是在向左还是向右,向上还是向下移动(例如,如果您有一个可水平滑动的轮播(默认行为被阻止,因此页面在水平方向上不会上下移动)滚动),但当用户明显在垂直轴之间拖动页面时,希望页面垂直滚动).

总结

以上是内存溢出为你收集整理的javascript-启用event.preventDefault时,允许使用touchstart进行垂直滚动全部内容，希望文章能够帮你解决javascript-启用event.preventDefault时,允许使用touchstart进行垂直滚动所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。