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();

阅读 9.3k
2 个回答
e.preventDefault();

上面代码可以解决!

新手上路,请多包涵

这个同时阻止了点击事件,我还想点击事件也可以用怎么办呢

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题