移动端防止误触元素页面跳转！

最新推荐文章于 2022-04-01 18:03:13 发布

泥猴桃

最新推荐文章于 2022-04-01 18:03:13 发布

阅读量3.7k

点赞数

分类专栏： javascript 文章标签： javascript 移动手机浏览器

本文链接：https://blog.csdn.net/shi851051279/article/details/53590686

版权

javascript 专栏收录该内容

58 篇文章 2 订阅

订阅专栏

有时候移动端页面通过手指滑动会误触到a标签造成页面跳转，这时候可以通过javascript 先清除掉浏览器的默认事件，然后通过window.location.href属性实现页面跳转！但是清除掉浏览器默认事件后点击a标签失效不会跳转手机浏览器的自带滚动条失效

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <title>Title</title>
    <style>
        a{width: 50px; height: 50px; display: block;background: red; margin-top: 20px;}
    </style>
</head>
<body>
    <a href="https://www.baidu.com/">百度</a>
    <a href="https://www.baidu.com/">百度</a>
    <a href="https://www.baidu.com/">百度</a>
    <a href="https://www.baidu.com/">百度</a>
    <a href="https://www.baidu.com/">百度</a>
    <a href="https://www.baidu.com/">百度</a>
    <a href="https://www.baidu.com/">百度</a>
    <a href="https://www.baidu.com/">百度</a>

<script>
    /*防止误触，先清除掉浏览器的默认事件  这时候 点击a标签失效不会跳转 手机浏览器的自带滚动条失效*/
    document.addEventListener('touchstart',function(e){
        e.preventDefault();
    });
    window.onload = function(){
        var Aa = document.querySelectorAll('a');
        for(var i=0;i<Aa.length;i++){
            Aa[i].addEventListener('touchmove',function(){
                this.isMove = true;  //给当前元素添加自定义属性isMove 让他等于true； 如果在元素上移动以后就等于true
            });
            Aa[i].addEventListener('touchend',function(){
                if(!this.isMove){   //这里判断 的是如果没有移动的话就是点击。根据当前元素的链接通过window.location.href跳转
                    window.location.href = this.href;
                }
                this.isMove = false;  //跳转完成以后恢复到false
            });
        }
    }
</script>
</body>
</html>

泥猴桃

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
移动端防止误触元素页面跳转！

有时候移动端页面通过手指滑动会误触到a标签造成页面跳转，这时候可以通过javascript 先清除掉浏览器的默认事件，然后通过window.location.href属性实现页面跳转！但是清除掉浏览器默认事件后点击a标签失效不会跳转手机浏览器的自带滚动条失效代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <met
复制链接

扫一扫

专栏目录