解决Hammer.js滑动事件无法在图像上工作的问题

问题描述


当你使用hammerjs为一个元素绑定滑动事件(swipeup, swipedown, swipeleft, swiperight)以后,如果该元素内部包含图片元素就会出现异常:手指在图片上进行滑动并不会出发父元素的滑动事件。


解决办法


禁止图片的touchmove事件: e.preventDefault(),还可以根据滑动方向分别作处理,代码如下:

<img @touchstart="touchstartHandler" @touchmove="touchmoveHandler" src="..." alt="">

touchstartHandler(e) {

    this.startX = e.touches[0].pageX;

    this.startY = e.touches[0].pageY;

}

touchmoveHandler(e) {

    let moveEndX = e.changedTouches[0].pageX;

    let moveEndY = e.changedTouches[0].pageY;

    let x = moveEndX -this.startX;

    let y = moveEndY -this.startY;

    if ( Math.abs(x) > Math.abs(y) && x >0 ) { // right

        console.log('向右');

    } else if ( Math.abs(x) > Math.abs(y) && x <0 ) { // left

        console.log('向左');

    } else if ( Math.abs(y) > Math.abs(x) && y >0) { // down

        e.preventDefault();

    } else if ( Math.abs(y) > Math.abs(x) && y <0 ) { // up

        e.preventDefault();

    } else {// 没有发生滑动

        console.log('没有发生滑动');

    }

}

推荐阅读更多精彩内容