better-scroll使用，手机上用不了@click事件，点击无效的解决办法

最新推荐文章于 2025-06-02 03:56:06 发布

原创最新推荐文章于 2025-06-02 03:56:06 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍在Vue项目中使用better-scroll插件时，手机端点击事件失效的问题及解决方案。better-scroll默认阻止原生click事件，需设置click属性为true，并在构造函数中添加_constructed属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当你在vue项目开发中使用了better-scroll的手机插件时候，浏览器将不进行滚动，而变成了滑动，这时候电脑浏览器可以用@click点击绑定事件，而在手机测试时，将没有反应。

原因是：better-scroll 默认会阻止浏览器的原生 click 事件。当设置为 true，better-scroll 会派发一个 click 事件，我们会给派发的 event 参数加一个私有属性 _constructed，值为 true。

代码展示方法：
html代码：

<template>
  <div class="list" ref="wrapper">
   ...
   ...
   ...
   </div>
 </template>

js代码：

mounted () {
    const options = {
      scrollY: false, // 因为scrollY默认为true，其实可以省略
      scrollX: true,
      mouseWheel: true,
      click: true,
      taps: true
    }
    this.scroll = new Bscroll(this.$refs.wrapper, options)
  }
}