React WebApp中<canvas>无需原生DOM选择器绑定触摸事件的正确方式

核心思路：不需要主动调用document.getElementById等DOM查询方法，直接在获取到canvas实例的节点绑定事件，或者使用事件委托机制完成交互适配。

原生JS实现方案 #

方案1：创建canvas时直接绑定事件 #

创建元素时直接持有canvas实例，不需要后续查询DOM即可绑定所有事件：

// 直接创建canvas元素，持有实例无需后续查询
const canvas = document.createElement('canvas')
canvas.width = 800
canvas.height = 600
canvas.style.border = '1px solid #333'
document.body.appendChild(canvas)

const ctx = canvas.getContext('2d')
let isDrawing = false

// 绑定鼠标事件
canvas.addEventListener('mousedown', startDrawing)
canvas.addEventListener('mousemove', draw)
canvas.addEventListener('mouseup', stopDrawing)
canvas.addEventListener('mouseout', stopDrawing)

// 绑定触摸事件
canvas.addEventListener('touchstart', (e) => {
  e.preventDefault() // 阻止默认滚动/缩放行为
  const touch = e.touches[0]
  const rect = canvas.getBoundingClientRect()
  startDrawing({
    offsetX: touch.clientX - rect.left,
    offsetY: touch.clientY - rect.top
  })
})
canvas.addEventListener('touchmove', (e) => {
  e.preventDefault()
  const touch = e.touches[0]
  const rect = canvas.getBoundingClientRect()
  draw({
    offsetX: touch.clientX - rect.left,
    offsetY: touch.clientY - rect.top
  })
})
canvas.addEventListener('touchend', (e) => {
  e.preventDefault()
  stopDrawing()
})
canvas.addEventListener('touchcancel', stopDrawing)

// 绘图逻辑鼠标、触摸复用
function startDrawing(e) {
  isDrawing = true
  ctx.beginPath()
  ctx.moveTo(e.offsetX, e.offsetY)
}
function draw(e) {
  if (!isDrawing) return
  ctx.lineTo(e.offsetX, e.offsetY)
  ctx.stroke()
}
function stopDrawing() {
  isDrawing = false
}

方案2：事件委托适配 #

不需要提前持有canvas实例，直接将事件绑定到父级或document，通过事件冒泡判断触发源即可：

document.addEventListener('touchstart', (e) => {
  // 仅处理canvas触发的事件
  if (e.target.tagName !== 'CANVAS') return
  e.preventDefault()
  const canvas = e.target
  const touch = e.touches[0]
  const rect = canvas.getBoundingClientRect()
  // 后续绘图逻辑和方案1完全一致
})
// touchmove、touchend事件同理绑定到父级/document即可

前端框架实现方案（以React为例） #

框架场景下直接在模板中绑定事件，不需要任何DOM查询操作：

import { useState, useRef } from 'react'

function DrawingCanvas() {
  const [isDrawing, setIsDrawing] = useState(false)
  const canvasRef = useRef(null)

  const startDrawing = (e) => {
    const ctx = canvasRef.current.getContext('2d')
    setIsDrawing(true)
    ctx.beginPath()
    ctx.moveTo(e.nativeEvent.offsetX, e.nativeEvent.offsetY)
  }

  const draw = (e) => {
    if (!isDrawing) return
    const ctx = canvasRef.current.getContext('2d')
    ctx.lineTo(e.nativeEvent.offsetX, e.nativeEvent.offsetY)
    ctx.stroke()
  }

  const stopDrawing = () => setIsDrawing(false)

  const handleTouchStart = (e) => {
    e.preventDefault()
    const canvas = canvasRef.current
    const touch = e.touches[0]
    const rect = canvas.getBoundingClientRect()
    startDrawing({
      nativeEvent: {
        offsetX: touch.clientX - rect.left,
        offsetY: touch.clientY - rect.top
      }
    })
  }

  return (
    <canvas
      ref={canvasRef}
      width={800}
      height={600}
      onMouseDown={startDrawing}
      onMouseMove={draw}
      onMouseUp={stopDrawing}
      onMouseOut={stopDrawing}
      onTouchStart={handleTouchStart}
      {/* 剩余touchmove、touchend、touchcancel事件按同理绑定即可 */}
    />
  )
}

关键注意点 #

• 触摸事件触发时必须调用e.preventDefault()，避免浏览器默认的滚动、双指缩放行为干扰绘图
• 触摸事件本身不携带offsetX/offsetY属性，需要通过触摸点坐标减去canvas的视口偏移量手动计算
• 必须绑定touchcancel事件处理异常中断的绘图场景，比如来电、弹窗遮挡等情况

内容的提问来源于stack exchange，提问作者Mitch Tal