使用better-scroll插件后，点击事件无效

最新推荐文章于 2024-11-27 16:00:03 发布

翻译最新推荐文章于 2024-11-27 16:00:03 发布 · 1.2k 阅读

本文解析了在使用BetterScroll插件后，原有点击事件失效的问题。原因为BetterScroll默认阻止浏览器原生click事件，需根据官方文档调整配置，使元素可被点击。

在使用滚动插件better-scroll后，发现之前的点击都无效了，这是怎么回事呢？

在查看了better-scroll官方文档发现原来使用该插件后，better-scroll 默认会阻止浏览器的原生 click 事件。

查看官方文档： https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html#tap
在这里插入图片描述

在这里插入图片描述

原来的html代码：
在这里插入图片描述
修改之后的html代码：
加上之后就可以正常点击了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

不胖十斤不改id

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Better-scroll插件初始化之后不能滚动，刷新之后又可以滚动问题解决

牛先森家的博客

09-18

1132

Better-scroll插件初始化之后不能滚动，刷新之后又可以滚动问题解决今天移动端突然发现个问题，项目初始化后页面无法滚动，真机上好像没这问题啊，百度可知，是better-scroll的原因，看网上还真有不少人遇到，经过一顿操作后，加了属性，应该可以了，如果大家有遇到，可以尝试如下方法；封装如下 <template> <div class="wrapper" ref="wrapper"> <div> <slot></slo

关于better-scroll失效的问题

qq_43429800的博客

05-28

884

关于better-scroll失效的问题最近在开发中，想要实现图片横向滚动的效果，用到了better-scroll插件，官方网址还是一如既往打不开，看不到其中的API接口和相应的说明，于是在使用插件过程中经常出现滚动失效。在这里就想记录一下bug的产生原因和解决方法。横向滚动 this.scroll = new BScroll(wrapper, { scrollX: true, //开启横向滚动 scrollY: false, //关闭纵向滚动 eventPassThrough: 'verti

参与评论您还未登录，请先登录后发表或查看评论

解决better-scroll导致点击事件失效的原因和解决方法

蒋百里的博客

07-05

8014

在vue项目重引入了better-scroll，但是在增加点击事件的时候，点击失效在官方文档中查到原因在better-scroll的属性中默认以下：解决办法：加上以下代码即可： ...

better-scroll框架包裹内容无法点击问题

m0_71299382的博客

11-27

255

对于better-scroll包裹内容无法点击触发点击事件的问题是因为我们需要为该框架设置可点击即在创建该框架实例时传递options(click:true)

使用 better-scroll 页面不能点击

輕描淡寫的博客

09-20

4145

better-scroll 默认会阻止浏览器的原生 click 事件。当设置为 true，better-scroll 会派发一个 click 事件，我们会给派发的 event 参数加一个私有属性 _constructed，值为 true。 const options = { click: true, taps: true } this.scroll = new BScroll(th...

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

weixin_42824291的博客

04-15

1093

当你在vue项目开发中使用了better-scroll的手机插件时候，浏览器将不进行滚动，而变成了滑动，这时候电脑浏览器可以用@click点击绑定事件，而在手机测试时，将没有反应。原因是：better-scroll 默认会阻止浏览器的原生 click 事件。当设置为 true，better-scroll 会派发一个 click 事件，我们会给派发的 event 参数加一个私有属性 _constr...

better-scroll使用后点击事件失效

09-09

1842

better-scroll使用后点击事件时效（9-8） this.scroll = new BScroll(this.$refs.wrapper, {click: true, tap: true }); 相关博客：https://blog.youkuaiyun.com/dexing07/article/details/79487344...

解决Vue项目中使用better-scroll无法正常滚动

奶油糖霜的博客

07-30

750

问题描述：最近在写Vue项目中，由于是移动端开发。为了改善原生滑动在移动端的流畅性问题，于是用了一个小工具better-scroll。但在Vue项目中封装scroll模块时，发现并不能正常滚动（无法滑动）。 import BScroll from 'better-scroll' export default { data() { return { scroll: null } }, mounted() { this.scroll = new BScroll(

Better-Scroll移动端滚动插件

weixin_44908855的博客

09-01

517

1. BetterScroll 是什么 BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。 BetterScroll 的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。 BetterScroll 是使用纯 JavaScript 实现的，这意味着它是无依赖的。 2. BetterScroll 的安装 npm 安装：npm install bet

better-scorll 横向滚动无效

ActionPig 的 Js

06-16

1038

高仿饿了么项目中用到了很多better-scroll插件，基本上都是垂直滚动。有几个点必须要注意，一个是外部包装器wrapper通过ref="",命名后在创建BScroll实例时作为参数传入并添加其他参数。 this.scroll = new BScroll(this.$refs.yourWrapper,{其他配置参数}); 这里也有两个点需要注意，一个是内部容器只能是独立的div或者其他元素，...

better-scroll滚动无效几种原因

热门推荐

qiqi_77_的博客

02-24

4万+

首先附上better-scrooll的github地址：https://github.com/ustbhuangyi/better-scroll可以下载官方案例学习。本人也会将better-scroll小案例上传自己github，附上本人使用better-scroll制作页面的github地址：https://github.com/seven77Zhou/vue-online-shop一、DOM层...

BetterScroll下的页面元素点击事件无效

m0_37814544的博客

01-20

2583

在ipad+妙控键盘（带触摸板），使用BetterScroll后渲染的页面元素里面的click点击事件无法生效

插件better-scroll的使用与点击失效问题解决

lareinax5的博客

11-09

945

执行命令 npm install better-scroll --save html代码块 <div class="homecontent" ref="wrapper"> <div> <router-link to="/DriverAccount"> <el-card class="box-card"> &lt.

使用betterscroll多个组件导致元素重叠无法滚动得解决

weixin_51897979的博客

07-29

398

问题在做商城项目得时候从home点击图片进入详情页面的时候出现元素混乱，无法滑动，但是刷新后恢复正常解决方法个人认为可能点击进入详情页面得时候多个组件同时加载，间隔时间短，而导致顶部元素和之后的元素同时渲染，可以再被重叠的那个元素添加position releative即可 ...

【HarmonyOS】webview在鸿蒙系统无点击反应

华为开发者联盟

12-24

2581

webview的activity的launchmode是singleTop类型的。在shouldOverrideUrlLoading方法中，判断url是否包含某个字段，然后替换url该字段为其他字段，然后继续打开当前activity，但是跳转不过去。设置WebViewClient 且该方法返回 true ，则说明由应用的代码处理该 url，WebView 不处理。1、在其他品牌手机没有出现这个问题，华为非鸿蒙系统也无此问题。欲了解更多更全技术文章，欢迎访问。

解决 better-scroll插件使用过程中无法滑动bug（原创，禁止转载）

zqy123456789000的博客

11-22

1865

解决 better-scroll插件使用过程中无法滑动bug 1：首先我们要知道 better-scroll 实现的原理条件必须包含两个大的div，外层和内层div 外层div设置可视的大小(宽或者高)-有限制宽或高内层div，包裹整个可以滚动的部分内层div(content)高度一定大于外层div(wrapper)的宽或高，才能滚动翻译：Warpper（包装，包装器) content(内容) 顾名思义，Wrapper 就是外层的盒子，content 就是你需要滑动区域里的内容也就是，你想要使

Vue 之移动端 better-scroll 下 click 事件失效问题（PC端却正常click点击）

仙魁XAN

06-26

1193

Vue 之移动端 better-scroll 下 click 事件失效问题（PC端却正常click点击）Vue 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。本节介绍，Vue 在PC 端在使用 better-scroll 下的 click 能正常点击，切换到移动端， better-scroll 下的 click点击却失效的简单处理，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。1、在使用better-scroll 进行页面过长的滚动预览，2、在 better-scroll 滚

vue使用 better-scroll的参数和方法

weixin_34310785的博客

11-09

356

格式：var obj = new BScroll(object,{[option1,],.,.});注意：1、要确保object元素的高度比其父元素高2、使用时，一定要确保object所在的dom渲染后，再用上面的语句，或者obj.refresh() Options 参数startX: 0 开始的X轴位置startY: 0 开始的Y轴位置scrollY: true 滚动方向为 Y 轴scrollX...

怎么安装插件 better-scroll 插件