vue移动端点击事件失效排查及解决方案

在开发Vue.js移动端应用时，@click事件失效是一个常见问题。本文将分析一个案例，并提供有效的解决方案。

问题描述：

项目中，两个按钮分别绑定了scanQRCode和routerList('upload')点击事件。PC端运行正常，但在移动端，使用vConsole调试时，点击事件无响应。页面未引入任何滚动插件（如Better Scroll或iScroll）。代码片段如下：

<div class="fixed-wrap">
  <div class="circle-btn" @click="scanQRCode">
    <van-icon class-prefix="iconfont" name="sao" size="40"></van-icon>扫一扫
  </div>
  <div class="upload-btn" v-if="resultInfo.count" @click="routerList('upload')">
    <van-icon class-prefix="iconfont" name="upload" size="22"></van-icon>上传
  </div>
</div>

问题原因分析：

立即学习“前端免费学习笔记（深入）”；

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

移动端点击事件失效通常由事件冒泡或默认事件干扰引起。@click指令默认触发元素的默认行为和事件冒泡。如果父元素或其他元素绑定了事件监听器，并阻止了事件传播或执行了默认操作，则子元素的@click事件可能失效。

解决方案：

使用Vue.js事件修饰符解决此问题：

1. .prevent修饰符：阻止默认事件。例如，<a></a>标签的默认行为是跳转链接，.prevent可以阻止此行为。
2. .stop修饰符：阻止事件冒泡。如果父元素也绑定了点击事件，事件冒泡会导致父元素事件优先触发。.stop可以阻止事件冒泡。

修改后的代码：

<div class="fixed-wrap">
  <div class="circle-btn" @click.prevent.stop="scanQRCode">
    <van-icon class-prefix="iconfont" name="sao" size="40"></van-icon>扫一扫
  </div>
  <div class="upload-btn" v-if="resultInfo.count" @click.prevent.stop="routerList('upload')">
    <van-icon class-prefix="iconfont" name="upload" size="22"></van-icon>上传
  </div>
</div>

通过添加.prevent和.stop修饰符，可以更可靠地解决移动端点击事件失效问题。 根据实际情况选择合适的修饰符，或同时使用两者以确保万无一失。 如果问题仍然存在，则需要检查其他潜在原因，例如CSS样式冲突或JavaScript代码错误。