javascript左右滑动手势与浏览器手势冲突

问题描述

问 题

**HTML**
    .thumbnail style='width:屏幕宽度;height:屏幕高度'
        ul.thumbnailContent style='width:屏幕宽度;height:屏幕高度'
            il
                img
            il
                img
            il
                img
                
                
                
**JAVASCRIPT**
        var startX = 0,
            touchendX = 0;
        
        // 滑动开始
        thumbnailContent.addEventListener('touchstart', function(e){
                    e.preventDefault(); **//解决方案**
                    startX = e.touches[0].clientX ;
        });
        
        // 滑动结束
        thumbnailContent.addEventListener('touchend', function(e){
                    e.preventDefault(); **//解决方案**
                    touchendX = e.changedTouches[0].clientX;
                    
                    var endX = touchendX - startX;
                    
                    if(endX > 40)
                    {
                        console.log('left!!');
                    }
                    else if(endX < -40)
                    {
                        console.log('right!!');
                    }
        });
        
    

我做了一个gallery图片画廊功能,就是类似网易新闻APP上面浏览图集那种效果,其实和轮播差不多吧,比轮播简单一些。

问题就是我现在左右滑动，浏览器直接返回上一页或者下一页，根本不执行脚本左右滑动，但是谷歌模拟器是OK的，不知道有什么技巧可以禁止浏览器返回一页。

已解决 谢谢大家。

e.preventDefault();

解决方案

e.preventDefault();

上面代码可以解决！

这篇关于javascript左右滑动手势与浏览器手势冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！