javascript左右滑动手势与浏览器手势冲突
伊谢尔伦
伊谢尔伦 2017-04-10 17:09:39
[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();

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

全部回复(1)
阿神
e.preventDefault();

上面代码可以解决!

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号