使用触摸检测滑动（左，右，上或下）

触摸式滑动是指在特定方向上快速移动手指穿过触摸表面的行为。onswipeJavaScript中目前没有“ ”事件，这意味着我们可以使用可用的触摸事件来实现一个事件，并且只需在刷卡时定义，即“刷卡”。

让我们首先定义何时应该将触摸表面上的移动视为滑动。有在玩两个变量这里-在距离旅行了用户对x或y轴的手指touchstart来 touchend，而且，它花时间。基于这两个因素，我们可以决定该操作是否符合滑动和方向。

有了这个，让我们把想法付诸行动，看看如何检测右键（从左到右）。一旦我们能够做到这一点，检测其他3个方向的滑动几乎完全相同。在这个练习中，我们将规定，当用户提出他在触摸手指表面最低为150px发生向右滑动水平从左至右在200毫秒以内。此外，垂直移动的距离不应超过100px，以避免用户斜向滑动的“误报”，我们不希望将其视为向右滑动。

五

三十

<SCRIPT>

window.addEventListener（'load'，function（）{

var touchsurface = document.getElementById（'touchsurface'），

startx的，

startY，

DIST，

阈值= 150，//所需的最小行程距离被视为滑动

allowedTime = 200，//允许行进该距离的最长时间

elapsedTime，

开始时间

function handleswipe（isrightswipe）{

if（isrightswipe）

touchsurface.innerHTML ='恭喜，你已经做了右滑动！'

其他{

touchsurface.innerHTML ='尚未满足右键滑动的条件'

}

}

touchsurface.addEventListener（'touchstart'，function（e）{

touchsurface.innerHTML =''

var touchobj = e.changedTouches [0]

dist = 0

startX = touchobj.pageX

startY = touchobj.pageY

startTime = new Date（）。getTime（）//记录手指首次与曲面接触时的时间

e.preventDefault（）

}，false）

touchsurface.addEventListener（'touchmove'，function（e）{

e.preventDefault（）//在DIV内阻止滚动

}，false）

touchsurface.addEventListener（'touchend'，function（e）{

var touchobj = e.changedTouches [0]

dist = touchobj.pageX - startX //在与表面接触时获得手指行进的总dist

elapsedTime = new Date（）。getTime（） - startTime //经过时间

//检查经过的时间是否在指定范围内，水平dist行进> =阈值，垂直dist行进<= 100

var swiperightBol =（elapsedTime <= allowedTime && dist> = threshold && Math.abs（touchobj.pageY - startY）<= 100）

handleswipe（swiperightBol）

e.preventDefault（）

}，false）

}，false）//结束window.onload

</ SCRIPT>

<div id =“touchsurface”>向我扫描</ div>

内touchend，我们检查DIST从行进 touchstart到touchend在指定的阈值以上的正数（即：150），因为在向右扫动，即DIST应该总是基于所使用（与阴性对左轻扫）等式是正。同时，我们确保任何垂直横向移动都小于100px以排除对角线滑动。由于垂直运动可以在起始触点上方或下方发生，因此我们Math.abs()在获得绝对垂直dist旅行时使用，因此在将其与我们的垂直阈值100进行比较时会涵盖两种情况。

通用滑动检测功能

现在我们向右滑动，让我们创建一个更通用的功能，检测4个方向（左，右，上或下）中的任何一个方向的滑动：

五

三十

function swipedetect（el，callback）{

var touchsurface = el，

swipedir，

startx的，

startY，

distX，

distY，

阈值= 150，//所需的最小行程距离被视为滑动

约束= 100，//垂直方向同时允许的最大距离

allowedTime = 300，//允许行进该距离的最长时间

elapsedTime，

开始时间，

handleswipe = callback || 函数（swipedir）{}

touchsurface.addEventListener（'touchstart'，function（e）{

var touchobj = e.changedTouches [0]

swipedir ='无'

dist = 0

startX = touchobj.pageX

startY = touchobj.pageY

e.preventDefault（）

}，false）

touchsurface.addEventListener（'touchmove'，function（e）{

e.preventDefault（）//在DIV内阻止滚动

}，false）

touchsurface.addEventListener（'touchend'，function（e）{

var touchobj = e.changedTouches [0]

distX = touchobj.pageX - startX //在接触表面时手指移动水平dist

distY = touchobj.pageY - startY //在接触表面时手指移动垂直dist

elapsedTime = new Date（）。getTime（） - startTime //经过时间

if（elapsedTime <= allowedTime）{//满足awipe的第一个条件

if（Math.abs（distX）> = threshold && Math.abs（distY）<= restraint）{//水平滑动的第二个条件遇到

swipedir =（distX <0）？'left'：'right'//如果dist行进是负数，则表示左滑动

}

否则if（Math.abs（distY）> = threshold && Math.abs（distX）<= restraint）{//垂直滑动的第二个条件遇到

swipedir =（distY <0）？'up'：'down'//如果dist旅行是负面的，它表示向上滑动

}

handleswipe（swipedir）

e.preventDefault（）

}，false）

}

//用法：

/ *

var el = document.getElementById（'someel'）

swipedetect（el，function（swipedir）{

swipedir包含“none”，“left”，“right”，“top”或“down”

if（swipedir =='left'）

警报（'你刚刚向左滑！'）

}）

* /

swipedetect()接受两个参数，即将触摸事件绑定到的元素，以及在滑动发生时执行的函数。函数参数“ swipedir”告诉您刚刚使用五个可能值进行的滑动类型：“ none ”，“ left ”，“ right ”，“ top ”或“ down ”。

下面使用该swipedetect()功能显示“左”，“右”，“顶部”或“向下”背景图像（覆盖在默认背景图像的顶部），具体取决于刚刚发生的滑动：

使用的代码是：

五

window.addEventListener（'load'，function（）{

var el = document.getElementById（'touchsurface2'）

var inner = document.getElementById（'inner'）

var hidetimer = null

swipedetect（el，function（swipedir）{

if（swipedir！='none'）{

clearTimeout（hidetimer）

var bgimage = swipedir +'arrow.png'//命名约定是“leftarrow.png”，“rightarrow.png”等

inner.style.background ='透明网址（'+ bgimage +'）中心无重复'

hidetimer = setTimeout（function（）{// 1秒后重置背景图像

inner.style.background =''

}，1000）

}

}）

}，false）

HTML标记是：

五

<div id =“touchsurface2”>

<div id =“inner”>

刷我

</ DIV>

</ DIV>

我们绑定swipedetect()到“ #touchsurface2”，每当在其中发生有效的滑动时，我们相应地更改“ #inner”DIV的背景图像以反映刚刚发生的滑动类型。

使用触摸检测滑动（左，右，上或下）

通用滑动检测功能

猜你喜欢