移动端web app 全面禁止事件默认行为--解决a标签跳转问题

最新推荐文章于 2024-05-07 19:58:56 发布

@meem@

最新推荐文章于 2024-05-07 19:58:56 发布

阅读量2.9k

点赞数 1

本文链接：https://blog.csdn.net/qq_43254688/article/details/86509328

版权

1.全面禁止事件的默认行为：

<script type="text/javascript">
  window.onload = function () {
    document.addEventListener('touchstart',function (ev) {
      ev = ev || event;
      ev.preventDefault()
    })
  }
//注意 ev.preventDefault() 阻止默认事件行为在Chrome浏览器手机端测试台上会发出警告不能阻止 事件的默认行为
应该以真机为准
</script>

显示警告内容如下图所示：
在这里插入图片描述

解决a标签跳转问题及滑动屏幕误触行为：

<body>
	<a href="http://www.*****.com">点击跳转</a>
</body>

    let aNode = document.querySelectorAll('a')//获取所有a标签节点（静态列表）
    for(let i = 0;i<aNode.length;i++){//循环遍历 为每一个a节点添加手指点击事件
      aNode[i].addEventListener('touchstart',function () {//touchstart手指按下事件
        this.isMove = false   //isMove 判断是否发生滑动
      })
      aNode[i].addEventListener('touchmove',function () {//touchmove手指滑动事件
          this.isMove = true
      })
      aNode[i].addEventListener('touchend',function () {//touchend手指抬起事件
        if (!this.isMove){
          location.href = this.href  //使用location.href 来进行跳转
        }
      })
    }

@meem@

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
移动端web app 全面禁止事件默认行为--解决a标签跳转问题

1.全面禁止事件的默认行为：&lt;script type="text/javascript"&gt; window.onload = function () { document.addEventListener('touchstart',function (ev) { ev = ev || event; ev.preventDefault() })...
复制链接

扫一扫