Vue+Vuetify移动端v-on:click事件部分设备失效求助

基于Vue和Vuetify开发的Web应用在桌面端运行正常，但移动端部分带v-on:click（即@click）的元素无法触发点击事件，且不同移动端设备出现问题的按钮不一致——比如按钮A在设备A可正常点击，在设备B却无法触发。

• 触摸事件兼容性适配：部分移动端浏览器对原生click事件的响应存在延迟或兼容性差异，可尝试同时绑定触摸与点击事件，提升触发稳定性：

  <button class="button" @touchstart.prevent="Login" @click="Login">Connexion</button>
  

• 检查元素层级遮挡：排查是否有透明元素（如绝对定位的容器、表单默认边距）覆盖在按钮上方，拦截了点击事件。可通过浏览器开发者工具的移动端模式查看元素层级，或临时给按钮添加z-index: 999测试。
• 修正CSS点击区域问题：若按钮或其父元素的display、position、overflow属性设置不当，可能导致实际点击区域偏移或缩小。建议给按钮添加cursor: pointer明确交互标识，同时检查是否存在user-select: none等可能影响交互感知的样式。
• 阻止事件冒泡干扰：若父元素存在事件绑定，可能导致按钮点击事件被拦截，可添加.stop修饰符阻止冒泡：

  <button class="button" @click.stop="Login">Connexion</button>
  

• 优化视口设置：确保HTML头部的视口标签配置正确，避免旧版移动端浏览器的300ms点击延迟：

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

1. 修复响应式绑定问题
   当前loginModel是普通对象，不具备Vue响应式特性，会导致输入框v-model绑定异常，需改为reactive或ref：

   import { reactive } from 'vue';
   const loginModel = reactive({
       tel: '',
       pass: ''
   });
   

2. 简化异步请求逻辑
   移除Login方法中多余的req/res参数，直接await异步请求，并优化错误提示：

   const Login = async () => {
       const user = {
           nom: loginModel.tel,
           password: loginModel.pass
       }
       try {
           const parsedResponse = await Axios.post('/Login', {
               telephone: user.nom,
               password: user.password,
           })
           if (!parsedResponse.data.token) {
               error.value = parsedResponse.data
               console.log(error.value);
           } else {
               localStorage.setItem('token', parsedResponse.data.token)
               error.value = `Bienvenue ${parsedResponse.data.user.nom} ${parsedResponse.data.user.prenom}`
               setTimeout(() => {
                   router.push('/dashboard')
               }, 800)
           }
       } catch (e) {
           console.error('登录失败:', e);
           error.value = '登录失败，请检查账号密码或网络连接'
       }
   }
   

3. 阻止表单默认提交行为
   表单的action=""会触发默认提交刷新页面，添加@submit.prevent阻止：

   <form class="form" @submit.prevent>
   

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