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

最新推荐文章于 2024-01-10 23:28:34 发布
最新推荐文章于 2024-01-10 23:28:34 发布
阅读量1.1k 收藏 1
点赞数

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

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

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

在这里插入图片描述

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

不胖十斤不改id
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
better-scroll使用，手机上用不了@click事件，点击无效的解决办法
weixin_42824291的博客
04-15 993
当你在vue项目开发中使用了better-scroll的手机插件时候，浏览器将不进行滚动，而变成了滑动，这时候电脑浏览器可以用@click点击绑定事件，而在手机测试时，将没有反应。 原因是：better-scroll 默认会阻止浏览器的原生 click 事件。当设置为 true，better-scroll 会派发一个 click 事件，我们会给派发的 event 参数加一个私有属性 _constr...
关于better-scroll失效的问题
qq_43429800的博客
05-28 778
关于better-scroll失效的问题 最近在开发中，想要实现图片横向滚动的效果，用到了better-scroll插件，官方网址还是一如既往打不开，看不到其中的API接口和相应的说明，于是在使用插件过程中经常出现滚动失效。在这里就想记录一下bug的产生原因和解决方法。 横向滚动 this.scroll = new BScroll(wrapper, { scrollX: true, //开启横向滚动 scrollY: false, //关闭纵向滚动 eventPassThrough: 'verti
解决better-scroll导致点击事件失效的原因和解决方法
蒋百里的博客
07-05 7882
在vue项目重引入了better-scroll，但是在增加点击事件的时候 ，点击失效 在官方文档中查到原因 在better-scroll的属性中默认以下： 解决办法：加上以下代码即可： ...
使用 better-scroll 页面不能点击
輕描淡寫的博客
09-20 4067
better-scroll 默认会阻止浏览器的原生 click 事件。当设置为 true，better-scroll 会派发一个 click 事件，我们会给派发的 event 参数加一个私有属性 _constructed，值为 true。   const options = { click: true, taps: true } this.scroll = new BScroll(th...
better-scroll使用后点击事件失效
pp
09-09 1779
better-scroll使用后点击事件时效（9-8） this.scroll = new BScroll(this.$refs.wrapper, {click: true, tap: true }); 相关博客：https://blog.csdn.net/dexing07/article/details/79487344...
当better-scroll 遇上element-ui时，dialog的层级问题处理
donggua_123的博客
02-02 4658
现在越来越多的开源工具使得开发效率大大提高，让开发者从繁琐的样式编写等工作中抽离出来，专注于前端逻辑的编写，很多时候只需要找到不同的工具、零件，按照自己的业务需求拼装在一起就是一辆很棒的车。只是不同的工具，组件也好、插件也好，都是由不同的人员开发维护的，属于独立的项目，但当我们要造车的时候，拿过来的零配件可能就有些地方无法相互兼容，比如多了个凹槽，导致两个零件无法很好的组装，这就需要手动去抹平这些...
下拉刷新上拉加载（Better-scroll）
CIA的博客
11-10 447
介绍 ​ better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。better-scroll 是基于原生 JS 实现的，不依赖任何框架。 http://ustbhuangyi.github.io/better-scroll/doc/api
better-scorll 横向滚动无效
ActionPig 的 Js
06-16 958
高仿饿了么项目中用到了很多better-scroll插件，基本上都是垂直滚动。 有几个点必须要注意，一个是外部包装器wrapper通过ref="",命名后在创建BScroll实例时作为参数传入并添加其他参数。 this.scroll = new BScroll(this.$refs.yourWrapper,{其他配置参数}); 这里也有两个点需要注意，一个是内部容器只能是独立的div或者其他元素，...
better-scroll无法滚动nextTick无效
07-27
根据引用\[1\]，BetterScroll是一款解决移动端各种滚动场景需求的插件，它的核心是基于iscroll实现的，并在此基础上进行了一些扩展和性能优化。它是使用纯JavaScript实现的，无依赖关系。 根据引用\[2\]，在使用...
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层...
解决Better Scroll滚动条不能点击元素事件失效问题
最新发布
sensendedede的博客
01-10 547
用BetterScroll做文章列表滚动容器会发生文章里的文字选中不可用，文章上的事件点击等等被禁用等问题。
BetterScroll下的页面元素点击事件无效
m0_37814544的博客
01-20 2448
在ipad+妙控键盘（带触摸板），使用BetterScroll后渲染的页面元素里面的click点击事件无法生效
插件better-scroll的使用与点击失效问题解决
lareinax5的博客
11-09 825
执行命令 npm install better-scroll --save html代码块 <div class="homecontent" ref="wrapper"> <div> <router-link to="/DriverAccount"> <el-card class="box-card"> &lt.
【HarmonyOS】webview在鸿蒙系统无点击反应
华为开发者联盟
12-24 1966
webview的activity的launchmode是singleTop类型的。在shouldOverrideUrlLoading方法中，判断url是否包含某个字段，然后替换url该字段为其他字段，然后继续打开当前activity，但是跳转不过去。设置WebViewClient 且该方法返回 true ，则说明由应用的代码处理该 url，WebView 不处理。1、在其他品牌手机没有出现这个问题，华为非鸿蒙系统也无此问题。欲了解更多更全技术文章，欢迎访问。
Vue 之 移动端 better-scroll 下 click 事件失效问题（PC端却正常click点击）
仙魁XAN
06-26 1038
Vue 之 移动端 better-scroll 下 click 事件失效问题（PC端却正常click点击）Vue 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。本节介绍，Vue 在PC 端在使用 better-scroll 下的 click 能正常点击，切换到移动端， better-scroll 下的 click点击却失效的简单处理 ，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。1、在使用better-scroll 进行页面过长的滚动预览，2、在 better-scroll 滚
使用betterscroll多个组件导致元素重叠无法滚动得解决
weixin_51897979的博客
07-29 309
问题 在做商城项目得时候从home点击图片进入详情页面的时候出现元素混乱，无法滑动，但是刷新后恢复正常 解决方法 个人认为可能点击进入详情页面得时候多个组件同时加载，间隔时间短，而导致顶部元素和之后的元素同时渲染， 可以再被重叠的那个元素添加position releative即可 ...
解决 better-scroll插件使用过程中无法滑动bug（原创，禁止转载）
zqy123456789000的博客
11-22 1660
解决 better-scroll插件使用过程中无法滑动bug 1：首先我们要知道 better-scroll 实现的原理 条件 必须包含两个大的div，外层和内层div 外层div设置可视的大小(宽或者高)-有限制宽或高 内层div，包裹整个可以滚动的部分 内层div(content)高度一定大于外层div(wrapper)的宽或高，才能滚动 翻译：Warpper（包装，包装器) content(内容) 顾名思义，Wrapper 就是外层的盒子，content 就是你需要滑动区域里的内容 也就是，你想要使
手机浏览器下better-scroll中click事件,链接无效的问题
dexing07的博客
03-08 3520
现在大多数vuejs . 项目都使用better-scroll但是大多数出现一个问题，就是在大的div里面的a 链接或者click事件都不用了这是 html 部分 <div ref="wrapper" class="list-wrapper"> <div class="setting-list" ref="setting" > <div class="setting-l
使用better-scroll实现Vue横向滚动轮播图组件
Vue中使用better-scroll实现轮播图组件 better-scroll是一款重点解决移动端（已支持PC）各种滚动场景需求的插件。它的核心是借鉴iscroll的实现，它的API设计基本兼容iscroll，在iscroll的基础上又扩展了一些feature...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值