某些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
// (插件源碼受影響也會報錯,因此插件裏這個地方也要同時修改)。
});
}