啟用 event.preventDefault 時允許使用 touchstart 垂直滾動

Question

我目前在啟用 event.preventdefault 時允許垂直滾動出現問題。

我正在嘗試向我的移動頁面添加滑動功能，我嘗試過像hammer.js、swipe.js 等這樣的框架，並且所有這些框架都需要啟用 event.preventDefault 來檢測左右滑動。

當 event.preventDefault 啟用時，滑動檢測完美，但是當您在該元素上時，您將失去垂直滾動的能力。 即，當您的手指開始滑動元素時，您無法在移動設備上上下移動屏幕。

我嘗試構建自己的小腳本，效果很好，但又出現了垂直滾動的問題，這是一個問題。

var el = document.getElementById('navigation');
el.ontouchstart = function(e){
        e.preventDefault();
        el.innerHTML = "touch start";
};
el.ontouchend = function(e){
        el.innerHTML = "touch end";
};
el.ontouchmove = function(e){
        el.innerHTML = "touch moved";
};

el.ontouchcancel = function(e){
        el.innerHTML = "touch cancel";
};

有任何想法嗎？？？

Answer 1

這是一個常見的問題，您希望本機瀏覽器行為與人們期望從觸摸屏設備獲得的交互行為一起工作。

如果您想使用一個庫，您可能需要將其打開，因為您將需要阻止默認設置以防止頁面在使用觸摸事件時到處跳轉，但在其他時候，您想根據需要省略它防止頁面停留在靜止位置，遮擋其他內容。

理想情況下，您希望向處理程序添加一個子句，指示它們是否阻止瀏覽器在接收到事件時執行的默認行為。

例如，滑動是一種應該在短時間內發生的行為（例如，如果您將手指從一個區域移動到另一個區域需要一整秒而不是 120 毫秒，那么您實際上並不是在滑動, 但拖動。考慮時間框架可能會在這里幫助你，例如：

var threshold = 150, interactionStart;

el.ontouchstart = function( e )
{
    // store timestamp of interaction start
    interactionStart = +new Date;
};

el.touchmove = function( e )
{
    // get elapsed time in ms since start
    var delta = +new Date - interactionStart;

    if ( delta > threshold )
    {
        e.preventDefault();
    }
    else {
        // super cool magic here
    }
};

150 毫秒是否是您想要的閾值取決於操作，正如您所看到的，您的問題沒有固定答案，因為實際實現取決於您的應用程序在觸摸交互方面的需求。

您還可以考慮在用戶沿垂直軸滾動更多時不阻止事件默認值（即比較事件 Y 偏移量的增量位置（相對於起始 Y 偏移量）是否大於事件 X 偏移量（相對於開始 X 偏移）來檢測用戶是向左或向右或向上或向下移動（例如，如果您有一個可以水平滑動的輪播（默認行為被阻止，因此頁面在水平期間不會向上/向下移動）滾動）但希望頁面在用戶明顯在垂直軸之間拖動頁面時垂直滾動）。

Answer 2

庫 jquery.touchSwipe 解決了這個問題。

圖書館： https : //github.com/mattbryson/TouchSwipe-Jquery-Plugin

滑動和滾動相結合的示例頁面： http : //labs.rampinteractive.co.uk/touchSwipe/demos/Page_scrolling.html