html上的纯Javascript滑动事件。。？_Javascript_Android_Jquery_Html_Swipe

html上的纯Javascript滑动事件。。？

javascript android jquery html

html上的纯Javascript滑动事件。。？,javascript,android,jquery,html,swipe,Javascript,Android,Jquery,Html,Swipe,我想为我的响应项目使用纯java脚本实现滑动功能。。我跟着这个。。。我无法实现这一点。。事件已正确启动，但无论移动浏览器和系统浏览器如何，事件都无法正常工作我的代码： <html> <head> <style> #touchsurface2{ height:200px; width:300px; background-color:#ffce44;

我想为我的响应项目使用纯java脚本实现滑动功能。。我跟着这个。。。我无法实现这一点。。事件已正确启动，但无论移动浏览器和系统浏览器如何，事件都无法正常工作

我的代码：

<html>
<head>
    <style>
        #touchsurface2{
            height:200px;
            width:300px;
            background-color:#ffce44;
            border:1px solid blue;
        }
    </style>
    <script> 
    function ontouch(el, callback){

    var touchsurface = el,
    dir,
    swipeType,
    startX,
    startY,
    distX,
    distY,
    threshold = 150, //required min distance traveled to be considered swipe
    restraint = 100, // maximum distance allowed at the same time in perpendicular direction
    allowedTime = 500, // maximum time allowed to travel that distance
    elapsedTime,
    startTime,
    handletouch = callback || function(evt, dir, phase, swipetype, distance){}

    touchsurface.addEventListener('touchstart', function(e){
        var touchobj = e.changedTouches[0]
        dir = 'none'
        swipeType = 'none'
        dist = 0
        startX = touchobj.pageX
        startY = touchobj.pageY
        startTime = new Date().getTime() // record time when finger first makes contact with surface
        handletouch(e, 'none', 'start', swipeType, 0) // fire callback function with params dir="none", phase="start", swipetype="none" etc
        e.preventDefault()

    }, false)

    touchsurface.addEventListener('touchmove', function(e){
        var touchobj = e.changedTouches[0]
        distX = touchobj.pageX - startX // get horizontal dist traveled by finger while in contact with surface
        distY = touchobj.pageY - startY // get vertical dist traveled by finger while in contact with surface
        if (Math.abs(distX) > Math.abs(distY)){ // if distance traveled horizontally is greater than vertically, consider this a horizontal movement
            dir = (distX < 0)? 'left' : 'right'
            handletouch(e, dir, 'move', swipeType, distX) // fire callback function with params dir="left|right", phase="move", swipetype="none" etc
        }
        else{ // else consider this a vertical movement
            dir = (distY < 0)? 'up' : 'down'
            handletouch(e, dir, 'move', swipeType, distY) // fire callback function with params dir="up|down", phase="move", swipetype="none" etc
        }
        e.preventDefault() // prevent scrolling when inside DIV
    }, false)

    touchsurface.addEventListener('touchend', function(e){
        var touchobj = e.changedTouches[0]
        elapsedTime = new Date().getTime() - startTime // get time elapsed
        if (elapsedTime <= allowedTime){ // first condition for awipe met
            if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint){ // 2nd condition for horizontal swipe met
                swipeType = dir // set swipeType to either "left" or "right"
            }
            else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint){ // 2nd condition for vertical swipe met
                swipeType = dir // set swipeType to either "top" or "down"
            }
        }
        // Fire callback function with params dir="left|right|up|down", phase="end", swipetype=dir etc:
        handletouch(e, dir, 'end', swipeType, (dir =='left' || dir =='right')? distX : distY)
        e.preventDefault()
    }, false)
}
</script>
<script>
    window.addEventListener('load', function(){
         var el = document.getElementById('touchsurface2')
         ontouch(el, function(evt, dir, phase, swipetype, distance){
             var touchreport = ''
             touchreport += '<b>Dir:</b> ' + dir + '<br />'
             touchreport += '<b>Phase:</b> ' + phase + '<br />'
             touchreport += '<b>Swipe Type:</b> ' + swipetype + '<br />'
             touchreport += '<b>Distance:</b> ' + distance + '<br />'
             el.innerHTML = touchreport
         })
        }, false);
</script>
</head>
 <body>
 <center>
    <div id="touchsurface2">
    </div>
</center>
</body>
</html>


#触摸屏2{
高度：200px；
宽度：300px；
背景色：#ffce44；
边框：1px纯蓝色；
}
函数ontouch（el，回调）{
var touchsurface=el，
局长，
泳衣，
startX，
斯塔蒂，
distX，
迪西，
threshold=150，//考虑刷卡所需的最小移动距离
约束=100，//垂直方向上同时允许的最大距离
allowedTime=500，//允许行驶该距离的最大时间
时光流逝，
开始的时候，
handletouch=callback | |函数（evt、dir、phase、swipetype、distance）{}
touchsurface.addEventListener（'touchstart'，函数（e）{
var touchobj=e.changedTouches[0]
dir='none'
SwipType='无'
距离=0
startX=touchobj.pageX
startY=touchobj.pageY
startTime=new Date（）.getTime（）//记录手指首次接触表面的时间
handletouch（e，'none'，'start'，swipeType，0）//使用params dir=“none”、phase=“start”、swipeType=“none”等参数启动回调函数
e、 预防默认值（）
}，错）
touchsurface.addEventListener（'touchmove'，函数（e）{
var touchobj=e.changedTouches[0]
distX=touchobj.pageX-startX//获取手指在接触表面时移动的水平距离
distY=touchobj.pageY-startY//获取手指接触表面时移动的垂直距离
如果（数学。ABS（DISX）>数学。ABS（DISY））{/ /如果水平行进的距离大于垂直，考虑这是水平运动。
dir=（distX<0）？“左”：“右”
handletouch（e，dir，'move'，swipeType，distX）//使用参数dir=“left | right”、phase=“move”、swipeType=“none”等启动回调函数
}
否则{//或认为这是一个垂直运动。
dir=（距离<0）？“向上”：“向下”
handletouch（e，dir，'move'，swipeType，distY）//使用参数dir=“up | down”、phase=“move”、swipeType=“none”等启动回调函数
}
e、 preventDefault（）//在DIV内时防止滚动
}，错）
touchsurface.addEventListener（'touchend'，函数（e）{
var touchobj=e.changedTouches[0]
elapsedTime=new Date（）.getTime（）-startTime//获取经过的时间
如果（elapsedTime=threshold&&Math.abs（distY）=threshold&&Math.abs（distX）只需将mousedown/mouseup的事件侦听器添加到其中…@Jonas w获得了它..非常感谢