移动端踩坑

最新推荐文章于 2021-06-02 16:42:18 发布

龙龙老表

最新推荐文章于 2021-06-02 16:42:18 发布

阅读量163

点赞数

分类专栏： Javascript 高级论述 HTML+CSS

本文链接：https://blog.csdn.net/qq_32466937/article/details/106727033

版权

Javascript 高级论述同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

HTML+CSS

7 篇文章 0 订阅

订阅专栏

事件点透

原因：元素触碰之后，会立即执行 touch 事件，然后会有一段时间的延迟，延迟过后在点击的位置上寻找对应元素，看看是否有鼠标事件，如果有就会立即执行

<!-- 事件点透案例 -->
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        opacity: 0.5;
        top: 0;
      }
    </style>
  </head>
  <body>
    <a href="http://www.baidu.com">百度</a>
    <div></div>
    <script>
      let div = document.querySelector("div");

      /* 再换成一般的 click 事件试试 【只点击一次】 */
      div.addEventListener("touchend", (e) => {
        div.style.display = "none";
        console.log("11");
        // e.preventDefault(); // 解决事件点透
      });
    </script>
  </body>
</html>

解决事件点透

不再使用移动端的鼠标鼠标【同时不再使用 a 标签的 href 属性】
阻止默认事件【 e.preventDefault() 】

触碰的相关属性

touches 当前屏幕上的手指列表
targetTouches 当前元素上的手指列表
changedTouches 触发当前事件的手指列表

box.addEventListener("touchend", function (e) {
  console.log(e.touches);
  console.log(e.targetTouches);
  console.log(e.changedTouches);
});

检测横屏竖屏

// 监听横竖屏切换
window.addEventListener("orientationchange", function () {
  if (window.orientation === 90 || window.orientation === -90) {
    console.log("横屏状态");
  } else {
    console.log("竖屏状态");
  }
});

设备移动

// 监听设备移动
window.addEventListener("devicemotion", (e) => {
  // 三轴的加速度
  let { x, y, z } = e.acceleration;
  document.getElementById("box").innerHTML = `
        x轴:${x}<br/>
        y轴:${y}<br/>
        z轴:${z}<br/>
    `;
});

龙龙老表

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端踩坑

事件点透原因：元素触碰之后，会立即执行 touch 事件，然后会有一段时间的延迟，延迟过后在点击的位置上寻找对应元素，看看是否有鼠标事件，如果有就会立即执行<html> <head> <style> div { width: 100px; height: 100px; background-color: red; position:
复制链接

扫一扫

专栏目录