如何在 html Web 应用中检测滑动原点位置

Question

在我的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 轴的 <=20% 开始，那么代码应该触发。

有谁知道如何做到这一点？

谢谢

Answer 1

在 swipe 事件处理程序中，使用 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" );
    }
});

Answer 2

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