你怎么能检测到用户用JavaScript在网页上朝某个方向滑动手指?

我想知道是否有一种解决方案可以同时适用于iPhone和Android手机上的网站.

推荐答案

简单的vanilla JS代码示例:

document.addEventListener('touchstart', handleTouchStart, false);        
document.addEventListener('touchmove', handleTouchMove, false);

var xDown = null;                                                        
var yDown = null;

function getTouches(evt) {
  return evt.touches ||             // browser API
         evt.originalEvent.touches; // jQuery
}                                                     
                                                                         
function handleTouchStart(evt) {
    const firstTouch = getTouches(evt)[0];                                      
    xDown = firstTouch.clientX;                                      
    yDown = firstTouch.clientY;                                      
};                                                
                                                                         
function handleTouchMove(evt) {
    if ( ! xDown || ! yDown ) {
        return;
    }

    var xUp = evt.touches[0].clientX;                                    
    var yUp = evt.touches[0].clientY;

    var xDiff = xDown - xUp;
    var yDiff = yDown - yUp;
                                                                         
    if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
        if ( xDiff > 0 ) {
            /* right swipe */ 
        } else {
            /* left swipe */
        }                       
    } else {
        if ( yDiff > 0 ) {
            /* down swipe */ 
        } else { 
            /* up swipe */
        }                                                                 
    }
    /* reset values */
    xDown = null;
    yDown = null;                                             
};

在安卓系统中测试.

Javascript相关问答推荐

setcallback是什么时候放到macrotask队列上的?

如何在ASP.NET中使用Google Charts API JavaScript将条形图标签显示为绝对值而不是负值

如何在coCos2d-x中更正此错误

使用js构造一个html<;ath&>元素并不能使其正确呈现

邮箱密码重置链接不适用于已部署的React应用程序

如何在FastAPI中为通过file:/URL加载的本地HTML文件启用CORS?

如何使用抽屉屏幕及其子屏幕/组件的上下文?

本地损坏的Java脚本

我为什么要使用回调而不是等待?

重新渲染过多(&Q).REACT限制渲染次数以防止无限循环.使用REACT下拉菜单时

为什么这个最小Angular 的Licial.dev设置不起作用?

我们是否可以在reactjs中创建多个同名的路由

检测带有委托的元素内部的点击,以及元素何时按其类名被选中

我在JS代码中收到超过最大调用堆栈大小的错误,但我找不到原因.有谁能帮我搬一下吗?

Reaction Chart.js为显示格式化日期的xax提供相同的差距

Chartjs 2.7.2,数据集的堆叠折线图背景 colored颜色 重叠

在Reaction-Router-DOM v6中使用菜单的共享布局时出现问题

文本动画在其消失之前

我不能把数字加在一起,尽管我使用了parseFloat,但我仍然得到了NaN

如何将数组时间范围分配给一周中的每一天?