[重構倒數第10天] - 行動裝置上面的 Touch 跟 Click - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 21

Modern Web

[ 重構倒數30天，你的網站不Vue白不Vue ] 系列第 21 篇

[重構倒數第10天] - 行動裝置上面的 Touch 跟 Click

13th鐵人賽 vue.js

Mike

2021-09-21 00:19:03

9278 瀏覽

分享至

前言

該系列是為了讓看過Vue官方文件或學過Vue但是卻不知道怎麼下手去重構現在有的網站而去規畫的系列文章，在這邊整理了許多我自己使用Vue重構很多網站的經驗分享給讀者們。

我們很常的會使用 v-on:click 的方式再我們網頁上面去觸發一些想做的事情，但是我們的網頁也會需要再手機上面去使用，click 事件雖然在手機上面也會有反應，但是畢竟是針對滑鼠點擊所設計的事件，在現代的行動裝置上面來說，click 事件功能細節稍稍不足，所以再行動裝置上面現在大多都改用 touch 事件來處理行動裝置上面的觸摸、滑動等。

這邊列出最常見的幾個 Touch Event

touchstart：當手指觸摸到螢幕的時候，但手指還沒有離開螢幕。
touchmove：手指在螢幕上面滑動。
touchend：當手指離開螢幕的時候。
touchcancel：當你再觸摸或是滑動的時候被中斷的時候觸發。

關於touchcancel的觸發時機

發生了某種取消touch事件情況，例如再滑動的過程中彈出警報視窗就會出發。
或是手指離開視窗並移動到瀏覽器上方的 UI 區域或其他外部內容中。
用戶在螢幕上放置的觸摸點超出了可使用的範圍，在這種情況下，TouchList 中最早的 Touch 將被取消。

TouchEvent MDN : https://developer.mozilla.org/zh-TW/docs/Web/API/TouchEvent

事件的執行先後順序

當我今天手指點擊到手機上面的時候，事件的觸發下面這樣

touchstart -> touchmove -> touchend -> click

我們在網頁上面同時要監聽 touch 事件以及 click 事件

const Button = document.getElementById("targetButton")
Button.addEventListener("touchstart", e => {
 console.log("touchstart event!")
})
  
Button.addEventListener("click", e => {
 console.log("click event!")
})

在桌機上面touchstart 是不會有反應的

vue mike

但是在手機上面就會照我們剛剛的順序，先執行了touchstart 然後再執行 click 事件

mike vue

codeprn 範例 : https://codepen.io/MikeCheng1208/pen/VwWQVLE

該怎麼解決呢?

為了讓行動裝置可以不要觸發 click 事件，我們可以加上 preventDefault()來阻止 click 事件的觸發。

const Button = document.getElementById("targetButton");

Button.addEventListener("touchstart", e => {
  e.preventDefault()
  console.log("touchstart event!")
})
  
Button.addEventListener("click", e => {
  e.preventDefault()
  console.log("click event!")
})

vue mike

codepen 範例 : https://codepen.io/MikeCheng1208/pen/dyRdQOQ

那再Vue上面該如何實做呢 ?

其實只要透過 Vue 的 Event Modifiers ( 事件修飾符 ) 就可以處理完成，

<button @click.prevent="clickFn" @touchstart.prevent="touchFn">touch click.</button>

codepen 範例 : https://codepen.io/MikeCheng1208/pen/zYzRMwR

另外一種做法，動態的去綁定事件 !

使用 Event Modifiers 會讓你的 template 上面寫了兩個事件，某種程度看起來 html 上面有點掛太多東西了，而且還要寫兩個 function 裡面是執行一樣的內容，所以今天如果可以對於 v-on 事件去做動態的綁定，例如今天是用手機看的我就只綁定 @touchstart，是桌機就是 @click，那我就不用寫兩個 function，html上面也會比較單純，那我們來看一下怎麼做。

<script>
import { ref } from Vue;
export default {
  setup(){
    const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase())
    const events = ref(isMobile ? 'touchstart' : 'click');
    const cluckAndTouchFn = () => {
      console.log('cluck And touch Event')
    }
    return {
      events,
      cluckAndTouchFn
    }
  }
};
</script>
<template>
    <button v-on:[events]="cluckAndTouchFn">touch click.</button>
</template>