移動端長按事件的使用與應用

在移動端開發中，長按事件是常見的一種交互方式，可以實現長按操作觸發特定的功能，例如複製、粘貼、刪除等。本文將從多個方面對移動端長按事件進行詳細闡述。

一、移動端長按事件與鬆開

長按事件分為兩個部分，一個是按下的瞬間觸發的事件，另一個是長按一定時間之後觸發的事件。一般情況下，長按一定時間之後會彈出一個選項框，其中包含了很多操作，例如複製、粘貼、刪除等。

document.getElementById('btn').addEventListener('touchstart', function (e) {
  // 長按
  this.timer = setTimeout(function () {
    console.log('長按事件觸發了')
  }, 1000)
})

document.getElementById('btn').addEventListener('touchend', function (e) {
  // 鬆開
  clearTimeout(this.timer)
})

上面的代碼是一個簡單的長按事件的示例，通過設置一個定時器，在長按一定時間後觸髮長按事件功能，並在鬆開時清除定時器。其中，timer 為一個全局變數，要在鬆開的時候清除，避免定時器依舊運行。

二、移動端事件有哪些

除了長按事件，移動端還有很多其他操作方式的事件。

1. 點擊事件

單次點擊觸發的事件，用於實現類似於網頁中的點擊跳轉等功能。

document.getElementById('btn').addEventListener('click', function(){
    console.log('點擊事件觸發了')
})

2. 雙擊事件

快速兩次點擊觸發的事件，用於實現類似於網頁中的放大、縮小等功能。

document.getElementById('btn').addEventListener('dblclick', function(){
    console.log('雙擊事件觸發了')
})

3. 滑動事件

手指在屏幕上滑動時觸發的事件，用於實現類似於輪播圖、畫廊等功能。

document.getElementById('btn').addEventListener('touchmove', function(){
    console.log('滑動事件觸發了')
})

4. 手勢事件

手指在屏幕上做出的各種手勢，例如旋轉、捏合、拖拽等。

document.getElementById('btn').addEventListener('gesturestart', function(){
    console.log('手勢開始事件觸發了')
})
document.getElementById('btn').addEventListener('gesturechange', function(){
    console.log('手勢變化事件觸發了')
})
document.getElementById('btn').addEventListener('gestureend', function(){
    console.log('手勢結束事件觸發了')
})

三、移動端長按事件彈出複製按鈕插件

移動端長按事件彈出複製按鈕插件是一個很常見的需求，可以通過自定義一個長按事件觸發複製框，並將選中的文本複製到剪貼板中實現。下面是一個例子：

function longPress(element, copyBtn) {
  let initX
  let initY
  let timer = null
  const MIN_DISTANCE = 10
  element.addEventListener('touchstart', (e) => {
    if (e.touches.length > 1) {
      return
    }
    initX = e.changedTouches[0].clientX
    initY = e.changedTouches[0].clientY
    timer = setTimeout(() => {
      copyBtn.show(element)
    }, 800)
  })
  element.addEventListener('touchmove', (e) => {
    const moveX = e.changedTouches[0].clientX
    const moveY = e.changedTouches[0].clientY
    if (Math.abs(moveX - initX) > MIN_DISTANCE || Math.abs(moveY - initY) > MIN_DISTANCE) {
      clearTimeout(timer)
      timer = null
      copyBtn.hide()
    }
  })
  element.addEventListener('touchend', () => {
    clearTimeout(timer)
    timer = null
    copyBtn.hide()
  })
}

上面的代碼中定義了一個長按事件函數，可以通過監聽 touchstart、touchmove、touchend 事件實現長按操作。其中 copyBtn 表示長按彈出框，可以通過該對象的 show()、hide() 方法實現顯示和隱藏操作。在長按一定時間後顯示彈出框，在移動操作或者鬆開時隱藏彈出框。

四、JS移動端事件

移動端與 PC 端的事件略有不同，移動端使用的事件更加豐富多彩，下面對 JS 移動端事件進行一些簡單的介紹。

1. 觸摸事件

觸摸事件是移動端最基本的事件之一，其包含了如下 4 種事件：

touchstart：手指放在屏幕上時觸發
touchmove：手指在屏幕上滑動時觸發
touchend：手指離開屏幕時觸發
touchcancel：觸摸被中斷時觸發

2. 手勢事件

手勢事件是移動端的特色事件之一，既包含了觸摸事件的三種基本事件，還包含了以下幾種事件：

gesturestart：多個手指觸摸屏幕時觸發
gesturechange：多個手指在屏幕上移動時觸發
gestureend：多個手指離開屏幕時觸發

3. 加速度事件

加速度事件是移動設備上的硬體事件，用於檢測設備的運動狀態和傾斜狀態。

window.addEventListener('devicemotion', function(event) {
  console.log(event.acceleration.x)
})

五、移動端手勢事件

手勢事件是移動端常見的一種事件，包含了各種手勢，例如旋轉、捏合、拖拽等。

1. 捏合手勢

捏合手勢是通過多指觸摸實現的，用於實現類似於放大或縮小的操作。

let zoom = 1
let lastScale = 1
let scale = 1
let posX = 0
let posY = 0
let obj = document.getElementById('obj')
obj.addEventListener('gesturestart', function(event) {
    lastScale = scale
})

obj.addEventListener('gesturechange', function(event) {
    scale = lastScale * event.scale
    obj.style.transform = 'scale(' + scale + ') translate(' + posX + 'px,' + posY + 'px)'
})

obj.addEventListener('gestureend', function(event) {
    lastScale = scale
})

2. 旋轉手勢

旋轉手勢通過多指觸摸實現，用於實現類似於旋轉的操作。

let lastDegree = 0
let degree = 0
obj.addEventListener('gesturestart', function(event) {
    lastDegree = degree
})

obj.addEventListener('gesturechange', function(event) {
    degree = lastDegree + event.rotation
    obj.style.transform = 'rotate(' + degree + 'deg) translate(' + posX + 'px,' + posY + 'px)'
})

3. 拖拽手勢

拖拽手勢通過單指觸摸實現，用於實現類似於拖拽的操作。

let startX = 0
let startY = 0
let offsetLeft = 0
let offsetTop = 0
obj.addEventListener('touchstart', function(event) {
    startX = event.touches[0].clientX
    startY = event.touches[0].clientY
    offsetLeft = obj.offsetLeft
    offsetTop = obj.offsetTop
})

obj.addEventListener('touchmove', function(event) {
    let x = event.changedTouches[0].clientX - startX + offsetLeft
    let y = event.changedTouches[0].clientY - startY + offsetTop
    obj.style.left = x + 'px'
    obj.style.top = y + 'px'
})

六、移動端 hover 事件

在 PC 端中，常見的交互方式之一就是滑鼠 hover 事件，但這個事件在移動端中並不存在。但通過模擬 hover 事件，我們仍然可以在移動端中實現類似於 hover 的效果。

document.getElementById('btn').addEventListener('touchstart', function(e) {
  this.classList.add('hover')
})

document.getElementById('btn').addEventListener('touchmove', function(e) {
  const rect = this.getBoundingClientRect()
  if (e.touches[0].clientX  rect.right || e.touches[0].clientY  rect.bottom) {
    this.classList.remove('hover')
  }
})

document.getElementById('btn').addEventListener('touchend', function(e) {
  this.classList.remove('hover')
})

通過添加和移除 class 屬性，來模擬 hover 事件。當手指滑出按鈕範圍時，移除 hover 效果。

七、移動端拖拽事件

在移動端中，通過拖拽來實現交互，也是非常常見的一種方式。下面是一個簡單的實現方法：

let dragItem = null
let currentX = 0
let currentY = 0
let initialX = 0
let initialY = 0
let xOffset = 0
let yOffset = 0

document.addEventListener('touchstart', dragStart)
document.addEventListener('touchend', dragEnd)
document.addEventListener('touchmove', drag)

function dragStart(e) {
  dragItem = e.target
  initialX = e.touches[0].clientX - xOffset
  initialY = e.touches[0].clientY - yOffset
}

function dragEnd(e) {
  initialX = currentX
  initialY = currentY
  dragItem = null
}

function drag(e) {
  if (dragItem !== null) {
    e.preventDefault()
    currentX = e.touches[0].clientX - initialX
    currentY = e.touches[0].clientY - initialY

    xOffset = currentX
    yOffset = currentY

    setTranslate(currentX, currentY, dragItem)
  }
}

function setTranslate(xPos, yPos, el) {
  el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)"
}

通過監聽 touchstart、touchend、touchmove 事件，在 touchmove 事件中實時更新元素位置的坐標，設置 translate 值來實現拖拽效果。

八、移動端雙擊事件

移動端雙擊事件在實現縮放等操作時非常實用，下面是一個簡單的雙擊事件實現方法：

let before = null
let lastTap = null
let currentScale = 1

obj.addEventListener('touchstart', function(event) {
  const now = Date.now()
  const delta = now - before
  const tap = event.touches[0].clientX + ',' + event.touches[0].clientY
  const doubleTap = lastTap && delta < 300 && tap === lastTap
  if (doubleTap) {
    currentScale = currentScale === 1 ? 2 : 1
    setScale(currentScale)
  }
  lastTap = tap
  before = now
})

function setScale(scale) {
  obj.style.transform = 'scale(' + scale + ') translate(' + posX + 'px,' + posY + 'px)'
}

通過設置一個 before 變數來記錄前一次點擊的時間戳，通過計算兩次點擊的時間差，來判斷是否

原創文章，作者：NNII，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/143739.html