【移动端事件】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
            // (插件源码受影响也会报错,因此插件里这个地方也要同时修改)。
        });
    } 

你可能感兴趣的:(JavaScript文章,移动Web,用户体验)