移動端事件穿透的原理與解決方案

来源:https://www.cnblogs.com/jofun/archive/2020/07/24/13371431.html
-Advertisement-
Play Games

移動設備的流行,帶動了移動互聯網的快速發展,很多開發者開始進入移動開發領域。目前市面上主流的移動設備一般都使用觸摸屏,觸摸屏所使用的觸摸事件模型與傳統網頁的滑鼠事件模型有所區別,這種差異往往使初涉移動端的開發工程師陷入困境,事件穿透問題便是其中一個,本文將帶你瞭解事件穿透及如何在實際項目中選擇合適的... ...


移動設備的流行,帶動了移動互聯網的快速發展,很多開發者開始進入移動開發領域。目前市面上主流的移動設備一般都使用觸摸屏,觸摸屏所使用的觸摸事件模型與傳統網頁的滑鼠事件模型有所區別,這種差異往往使初涉移動端的開發工程師陷入困境,事件穿透問題便是其中一個,本文將帶你瞭解事件穿透及如何在實際項目中選擇合適的方案解決事件穿透問題。

產生的原因

當今,主流的移動設備一般都使用觸摸屏,Web 應用程式可以使用觸摸事件(Touch Events)直接處理基於觸摸的輸入,或者應用程式可以使用可解釋的滑鼠事件以處理應用程式的輸入。使用滑鼠事件的缺點是它們不支持併發用戶輸入,而觸摸事件支持多個同時輸入(可能在觸摸面上的不同位置),從而增強用戶體驗。

觸摸事件有以下事件類型:

  • touchstart:當觸摸點放置在觸摸面上時觸發。
  • touchmove:當觸摸點沿觸摸錶面移動時觸發。
  • touchend:當觸摸點從觸摸錶面移除時觸發。
  • touchcancel:當觸摸點以實現特定的方式中斷(例如,創建的觸摸點太多)時觸發。

在很多情況下,觸摸事件和滑鼠事件會同時被觸發(目的是讓沒有對觸摸設備優化的代碼仍然可以在觸摸設備上正常工作)。如下代碼:

document.addEventListener('touchstart', () => {
  console.log('touchstart')
})

document.addEventListener('touchend', () => {
  console.log('touchend')
})

document.addEventListener('click', () => {
  console.log('click')
})

事件觸發的先後順序是:touchstart -> touchend -> click。正是由於這種 click 事件的滯後性設計為事件穿透(點擊穿透)埋下了伏筆。

什麼是事件穿透

事件穿透是指觸發某個目標元素的觸摸事件時,會同時觸發該目標元素相同位置中其他元素的滑鼠點擊事件。例如:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>事件穿透</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      div {
        width: 100vw;
        height: 100vh;
        line-height: 100vh;
        text-align: center;
      }

      .mask {
        position: fixed;
        top: 0;
        left: 0;
        background: #333;
        opacity: 0.6;
      }
    </style>
  </head>
  <body>
    <div>事件穿透</div>
    <div class="mask"></div>

    <script>
      const $div = document.querySelector("div")
      const $mask = document.querySelector(".mask")

      $mask.addEventListener('touchstart', (e) => {
        console.log('mask touchstart')
        e.target.style.display = 'none'
      })

      $div.addEventListener('click', () => {
          console.log('div click')
        })
    </script>
  </body>
</html>

由於 mask 元素觸發 touchstart 觸摸事件並立即隱藏掉自身,之後應該按先後順序觸發 mask 元素的 touchend 和 click 事件。然而,當要觸發 click 事件的時候由於 mask 元素已經隱藏掉了,於是觸發了 div 的 click 事件。

常見的事件穿透場景:

  • 目標元素觸發觸摸事件時隱藏或移除自身,對應位置元素觸發 click 事件或 a 鏈接跳轉。
  • 目標元素使用觸摸事件跳轉至新頁面,新頁面中對應位置元素觸發 click 事件或 a 鏈接跳轉。

註意:a 標簽的鏈接跳轉事件屬於 click 事件。

解決方法

市面上解決事件穿透的方法有很多,大致可以分為兩類:第一種是禁止混用 click 和 touch 兩種事件;另一種是延遲元素的隱藏或移除。

禁用 click 事件

這種方法是將頁面內所有元素的 click 事件改用 touch 事件。這種方法的好處非常明顯,既解決了 click 事件延遲造成體驗不佳的問題又解決了事件穿透的問題,但是缺點也很明顯,就是 a 標簽的鏈接跳轉的處理問題。

禁用 a 標簽的點擊事件,改用 touch 事件觸發鏈接跳轉。實現如下:

// 禁用 a 標簽的點擊事件
document.addEventListener('click', (e) => {
  const href = e.target.getAttribute('href')
  const nodeName = e.target.nodeName.toLowerCase()

  if (nodeName === 'a' && href) {
    e.preventDefault()
  }
})

// 改用 touch 事件觸發鏈接跳轉
document.addEventListener('touchstart', (e) => {
  const href = e.target.getAttribute('href')
  const nodeName = e.target.nodeName.toLowerCase()

  if (nodeName === 'a' && href) {
    const target = e.target.getAttribute('target')
    window.open(href, target || '_self')
  }
})

看似很完美,然而,當 a 標簽內包含後帶元素的時候,後代元素的 click 事件通過冒泡還是會觸發 a 標簽的跳轉。怎麼解決?使用 pointer-events 禁用 a 標簽所有後代元素的滑鼠事件:

a[href] * {
  pointer-events: none;
}

禁用 touch 事件

這種方法是將頁面內所有元素的 touch 事件改用 click 事件。事件穿透不就是由於 touch 與 click 事件存在觸發時間差造成的嗎,全部都使用 click 事件就不會有問題。然而事實真的如此美好?當然不是的,首先要解決 click 事件延遲 300ms 的問題。解決點擊事件延遲的問題可以使用以下的 CSS 代碼實現:

html {
  touch-action: manipulation;
}

這樣已經很完美了。然而,什麼是工作?工作就是不停的解決問題。當你不得不為項目添加手勢功能,增加用戶體驗的時候(比如:左滑、右滑等等各種滑),你才會意識到完全禁用 touch 事件在實際項目中是不可能的事情。這個時候怎麼辦,推到從來,全部改用 touch 事件?當然不用這麼麻煩,你可以在使用 touch 事件時通過調用 preventDefault() 阻止觸發 click 事件。例如:

const $mask = document.querySelector(".mask")

$mask.addEventListener('touchstart', (e) => {
  ...
  e.preventDefault()
})

總結

解決事件穿透還有通過設置動畫過渡延遲元素消失等方法,由於這類方法影響用戶體驗,不一一介紹。在實際項目開發中,純移動端項目優先推薦禁用 click 事件的方法,多端項目優先推薦禁用 touch 事件的方法。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 不管是做自媒體還是做電商或是工作素材採集,都離不開視頻,視頻比文字更好展示出產品、細節內容,就好比我們經常看的抖音、快手、火山、皮皮蝦之類的短視頻裡面就有很多優秀的素材,相信有採集過的朋友都會遇到平臺水印這個問題吧!今天小編就教大家如何快速批量下載無水印短視頻!一起來看看吧! 打開這個哼哼貓批量去水 ...
  • 教程 Flutter瀑布流及通用列表解決方案 Canonical 在 Linux 上提供 Flutter 桌面應用支持 插件 koukicons-flutter 🍪 Colorful Icons for your Flutter App fontify Converts SVG icons to ...
  • (一)三表 用途 list列表 整齊佈局 ul先到先得,ol有序排列,還有個自定義【dl>dt>dd】 table列表 展示數據結構 【caption table>th/tr>td(thead標題 tbody數據 tfoot腳註)】 【border/cellspacing/cellpadding表格 ...
  • 在安裝vue-awesome-swiper時報錯swiper/dist/css/swiper.min.css找不到,如下如: 有的回答安裝6.0版本的話需要引入另外一個css import 'swiper/swiper-bundle.css' 但是,我替換完css 之後又一個問題出現了,vue-aw ...
  • 在選擇的元素內: append() //後 prepend() //前 在選擇的元素外: after() //後 before() //前 舉例: ...
  • 首先需要搭建一個簡單的應用 前端部分不多贅述,如果確實沒接觸過 Vue 項目,可以參考我的《Vue 爬坑之路》系列 後端服務可以參考之前的文章《Node.js 蠶食計劃(六)—— MongoDB + Koa 入門》 完整的項目地址:https://github.com/wisewrong/Test- ...
  • 字體 文本顏色:color:red;字體分類: 襯線字體serif --字體寬度各異,有襯線 --Times、Georgia、宋體 無襯線字體sans-serif --字體寬度各異,無襯線 --Helvetica、Verdana、Arial、微軟雅黑 等寬字體monospace --字體寬度一樣,一 ...
  • 示例 1: 輸入: s = "leetcode"輸出: false 示例 2: 輸入: s = "abc"輸出: true限制: 0 <= len(s) <= 100如果你不使用額外的數據結構,會很加分。 /** * @param {string} astr * @return {boolean} ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...