[重构倒数第10天] - 行动装置上面的 Touch 跟 Click

前言

该系列是为了让看过Vue官方文件或学过Vue但是却不知道怎麽下手去重构现在有的网站而去规画的系列文章，在这边整理了许多我自己使用Vue重构很多网站的经验分享给读者们。

我们很常的会使用 v-on:click 的方式再我们网页上面去触发一些想做的事情，但是我们的网页也会需要再手机上面去使用，click 事件虽然在手机上面也会有反应，但是毕竟是针对滑鼠点击所设计的事件，在现代的行动装置上面来说，click 事件功能细节稍稍不足，所以再行动装置上面现在大多都改用 touch 事件来处理行动装置上面的触摸、滑动等。

这边列出最常见的几个 Touch Event

1. touchstart：当手指触摸到萤幕的时候，但手指还没有离开萤幕。
2. touchmove：手指在萤幕上面滑动。
3. touchend： 当手指离开萤幕的时候。
4. 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 是不会有反应的

但是在手机上面就会照我们刚刚的顺序，先执行了touchstart 然後再执行 click 事件

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!")
})

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>

1. 我首先先去判断它是不是手机
2. 然後去定义一个 ref 的 event name，如果是手机就 return 'touchstart'不然就是 click
3. 然後透过 v-on:[events]的方式去动态的绑定事件。

这样一来我们就可以只针对装置去判断要绑定什麽事件上去，是非常好用的一个方法。

codepen 范例 : https://codepen.io/MikeCheng1208/pen/QWgQJQd

今天就先告一个段落

再手机上面还是使用 touch 事件会比较顺畅跟灵敏，不过 click 事件也是堪用啦，但是如果需要更多的操作空间，那你真的可以考虑使用 touch 事件，不要嫌麻烦，那我们明天见啦~

那如果对於Vue3不够熟的话呢?

Ps. 购买的时候请登入或注册该平台的会员，然後再使用下面连结进入网站点击「立即购课」，这样才可以让我获得更多的课程分润，还可以帮助我完成更多丰富的内容给各位。

我有开设了一堂专门针对Vue3从零开始教学的课程，如果你觉得不错的话，可以购买我课程来学习
https://hiskio.com/bundles/9WwPNYRpz?s=tc

那如果对於JS基础不熟的朋友，我也有开设JS的入门课程，可以参考这个课程
https://hiskio.com/bundles/b9Rovqy7z?s=tc

订阅Mike的频道享受精彩的教学与分享

Mike 的 Youtube 频道
Mike的medium
MIke 的官方 line 帐号，好友搜寻 @mike_cheng