【移動端事件】swiper左右滑動時禁止頁面上下滾動

某些swiper類插件,左右滑動時會導致頁面上下滾動,如果在touchmove事件中直接使用event.preventDefault(),就會徹底阻止觸摸滑動,給用戶的感受就是劃不動。
以下是增加的fix code

    // 左右滑動時阻止頁面上下滑動
    var touchElement = {};
    var $slides = $('.am-slider');
    if ($slides.length) {
        $slides.on('touchstart', function (e) {
           touchElement.startX = e.touches[0].clientX;
           touchElement.startY = e.touches[0].clientY;
        }).on('touchmove', function (e) {
            var deltaX = e.touches[0].clientX - touchElement.startX;
            var deltaY = e.touches[0].clientY - touchElement.startY;
            if (Math.abs(Math.asin(deltaY/deltaX)) <= 15/180*Math.PI && e.cancelable) {
                e.preventDefault();
            }
            // e.cancelable默認爲false,即touchmove中不能強制執行e.preventDefault(),
            // 因此會報錯Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted,
            // 所以這裏要判斷e.cancelable === true
            // (插件源碼受影響也會報錯,因此插件裏這個地方也要同時修改)。
        });
    } 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章