移动端触摸事件事件防误触以及 1物理像素问题

最新推荐文章于 2022-02-24 21:16:35 发布

白猫儿

最新推荐文章于 2022-02-24 21:16:35 发布

阅读量487

点赞数

分类专栏：移动端适配文章标签： web app html css3

本文链接：https://blog.csdn.net/weixin_46107920/article/details/111679554

版权

移动端适配专栏收录该内容

3 篇文章 0 订阅

订阅专栏

移动端触摸事件事件防误触以及 1物理像素问题

移动端的主要三个事件

touchstart touchmove touchend 分别对用 PC 端事件的 mousedowm mousemove mouseup

移动端中有很多的默认事件

比如长按某个文本时，能够选中复制。这样对于很多业务是不符合逻辑的，因此我们先来阻止默认事件。

<script>
    // 阻止移动端默认事件
    window.onload = function () {
      document.addEventListener('touchstart', function (ev) {
        ev = ev || event
        ev.preventDefault()
        // console.log(ev.cancelable)  是否可阻止默认事件，输出 true, false
      })
    }
  </script>

但是阻止默认行为之后，有两个很大的缺陷就是，所有的滚动条都会失效和会出现事件点透现象。

事件点透现象该怎么解决呢？

事件点透，两个重合的元素，明明事件要执行的是第一个元素的方法，但是却还执行了另一个元素的方法。举个例子，比如说一个 a 标签和一个 div 盒子定位到了一起，监听div盒子的事件点击，点击出后让他出现一个背景色，但是也执行了跳转事件。

PC 端的事件，是可以在移动端使用的，比如 click 点击事件，好处是不会出现点透现象，但是却有 300ms 延迟，但是移动端的事件是不会有延迟的

最好的移动端跳转方案，且有防误触

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>Document</title>
</head>
<body>
  <a href="https://www.baidu.com">百度</a>

  <script>
    // 阻止默认事件
    document.addEventListener('touchstart', function(ev) {
      ev = ev || event
      ev.preventDefault()
    })

    // 阻止默认事件之后，会发生 a标签点击不起作用，也就是说a标签的跳转事件被阻止了
    // 下面就是移动端的点击事件解决方案，且拥有防误触功能

    let aNode = document.querySelector('a')
    aNode.addEventListener('touchstart', function() {
      this.isMoved = false
    })

    aNode.addEventListener('touchmove', function() {
      this.isMoved = true
    })

    aNode.addEventListener('touchend', function() {
      if(!this.isMoved) {
        location.href = this.href
      }
    })
  </script>
</body>
</html>

event => changedTouches

移动端的 event 中一个重要属性就是 changedTouches，利用它可以获取到触摸的位置
在这里插入图片描述

移动端常见问题

禁止电话和邮箱

<meta name="format-detection" content="telephone=no, email=no">

 <p>122</p>  // 无效
 <a href="122">122</a>  // 有效
 <a href="9090877876@qq.com">9090877876@qq.com</a>   // 有效

解决 a 链接点击高亮问题

 <style>
    a {
      text-decoration: none;
      -webkit-tap-highlight-color: none;
    }
 </style>

<body>
  <a href="javascript:;">1671671671</a>
</body>

解决按钮圆角渲染

<style>
    input {
      -webkit-appearance: none;
    }
 </style>

<body>
  <input type="button" value="按钮">
</body>

解决 Foot Boostring 字体放大

<style>
    p {
      font-size: 30px;
      max-height: 9999999px;
    }
 </style>

<body>
  <p>cujewfscjsdhcujkhbjcsdhcj</p>
</body>

1 物理像素的问题

淘宝方案

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .line {
      width: 16rem;
      height: 1px;
      margin-top: 1rem;
      background-color: #000;
    }
  </style>
</head>
<body>
  <div class="line"></div>
  
  <script>
    // 淘宝方案
    (function() {
      let dpr = window.devicePixelRatio || 1
      let styleNode = document.createElement('style')
      let w = document.documentElement.clientWidth*dpr/16
      styleNode.innerHTML = "html {font-size: "+ w +"px!important}"
      document.head.appendChild(styleNode)
      let scale = 1/dpr
      let meta = document.querySelector("meta[name='viewport']")
      meta.content="width=device-width, initial-scale="+scale+", user-scalable=no"
    })()
  </script>
</body>
</html>

一般方案

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .line {
      width: 100%;
      height: 1px;
      margin-top: 30px;
      background-color: #000;
    }

    @media only screen and (-webkit-device-pixel-ratio:2) {
      .line {
        transform: scaleY(.5);
      }
    }
    @media only screen and (-webkit-device-pixel-ratio:3) {
      .line {
        transform: scaleY(.333333333);
      }
    }
  </style>
</head>
<body>
  <div class="line"></div>
</body>
</html>

白猫儿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动端触摸事件事件防误触以及 1物理像素问题

移动端触摸事件事件防误触以及 1物理像素问题移动端的主要三个事件touchstart touchmove touchend 分别对用 PC 端事件的 mousedowm mousemove mouseup移动端中有很多的默认事件比如长按某个文本时，能够选中复制。这样对于很多业务是不符合逻辑的，因此我们先来阻止默认事件。<script> // 阻止移动端默认事件 window.onload = function () { document.add
复制链接

扫一扫