如何使用Alpine.js阻止移动端双击放大同时保证点击事件正常触发

解决方案 #

你可以通过单独阻止双击事件的默认行为实现需求，不要修改原有点击事件的逻辑：

1. 调整模板写法，保留原有正常点击事件，额外添加双击事件阻止默认行为：

@click="playInstance()"
@dblclick.prevent

这种方案的优势是只会禁用当前元素的双击放大效果，不会影响页面其他区域的正常缩放能力。

备选方案（全局禁用页面缩放） #

如果你需要整个页面都禁止双击/双指缩放，可以在项目入口HTML的head标签中添加viewport配置：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

这种方案不需要修改元素的事件绑定，全局生效，适合不需要缩放能力的单页应用场景。

优化建议 #

如果存在高频点击的场景，可以给播放逻辑添加防抖处理，避免短时间内多次调用audioObj.play()抛出异常：

playInstance: (function() {
  let lastInvokeTime = 0
  // 200ms内重复点击只会执行一次播放逻辑
  const debounceGap = 200
  return function() {
    const currentTime = Date.now()
    if (currentTime - lastInvokeTime < debounceGap) return
    lastInvokeTime = currentTime
    audioObj.play()
  }
})()

原写法失效原因说明 #

你之前给@click添加prevent修饰符后播放失效，是因为浏览器要求音频播放必须由可信的用户交互事件触发，阻止click事件的默认行为会被部分浏览器判定为非可信交互，导致play()调用被拦截。

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