如何检测 html Web 应用程序中的滑动源位置？

Posted 2023-05-09

【中文标题】如何检测 html Web 应用程序中的滑动源位置？

【英文标题】：How to detect swipe origin location in html web apps?

【发布时间】：2015-05-17 23:31:31

【问题描述】：

在我的 jquery 移动应用程序中，我有来自他们网站的代码，用于检测滑动以使用滑动打开面板。这是代码：

function swipePanel(pageId, leftPanelId) 
    $( document ).on( "pageinit", pageId, function() 
        $( document ).on( "swipeleft swiperight", pageId, function( e ) 
            // We check if there is no open panel on the page because otherwise
            // a swipe to close the left panel would also open the right panel (and v.v.).
            // We do this by checking the data that the framework stores on the page element (panel: open).
            if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) 
                if ( e.type === "swiperight" ) 
                    $( leftPanelId ).panel( "open" );
                
            
        );
    );

我删除了一点（向左滑动检测，因为我只需要向右滑动）。

问题是，如果我从任何地方向右滑动，例如如果我的手指超过屏幕 x 轴的 75%，并且我向右滑动，就会触发此代码。我想要这样，如果我向右滑动，并且我的手指从屏幕 x 轴的

有人知道怎么做吗？

谢谢

【问题讨论】：

为什么不将事件仅绑定到您希望滑动发生的最顶层元素？或者创建一个空的 div，占据屏幕的所需部分来捕捉事件。

您也可以查看e.pageX/ window.innerWidth，并且仅在超过 x% 时才这样做

【参考方案1】：

在滑动事件处理程序中，使用 swipestart.coords[0] 获取滑动开始位置的 x 坐标。然后计算20%的页面宽度：

$( document ).on( "swiperight", "#page1", function( e ) 
    var startX = e.swipestart.coords[0];
    var totalWidth = $(window).width();
    if (startX < totalWidth/5)
        $("#thePanel").panel( "open" );
    
);

【参考方案2】：

虽然我从未使用过它 - 试试这个库：http://interactjs.io/。看起来很有希望并且有据可查。