vue中使用了better-scroll导致click事件失效

最新推荐文章于 2023-05-10 22:46:16 发布
最新推荐文章于 2023-05-10 22:46:16 发布
阅读量347 收藏
点赞数 1
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44755188/article/details/108286625
版权

失效原因：使用了better-scroll，默认它会阻止touch事件，在配置中需要加上click: true 即可

太想进步了
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
解决给dom元素绑定click等事件无效问题的方法
12-09
之前一直遇到js插件生成的元素，click事件无效的问题，重新绑定也不行，终于找到解决方法，在此记下来。 同时加深对js事件处理机制的理解。 1. 事件被解绑 这种情况下一般不会导致click失效，但以下情况，click事件就失效了： $(function(){ $('.btn').unbind() }) $('.btn').click(function(){ //... }) 所以，click事件要有个好习惯： $(function(){ $('.btn').click(function(){ //... }) }) 2. js插件异步／动态加载dom 一般含有等待时间／开
移动端使用better-scroll时父级元素使用了touch事件，子元素的click事件失效
weixin_43756060的博客
01-24 1496
解决这个问题只需要在better-scroll设置click:true就可以了，因为默认为false this.scroll = new BScroll(this.$refs.wrapper, { probeType: 3, click: true })
better-scroll使用，手机上用不了@click事件，点击无效的解决办法
weixin_42824291的博客
04-15 925
当你在vue项目开发中使用了better-scroll的手机插件时候，浏览器将不进行滚动，而变成了滑动，这时候电脑浏览器可以用@click点击绑定事件，而在手机测试时，将没有反应。 原因是：better-scroll 默认会阻止浏览器的原生 click 事件。当设置为 true，better-scroll 会派发一个 click 事件，我们会给派发的 event 参数加一个私有属性 _constr...
JavaScript - 基础+WebAPI（笔记）
qq_48937489的博客
05-10 3687
输入输出语法、数据类型、运算符、流程控制（分支语句、循环语句）、数组、对象、函数、DOM、事件监听、常用事件、事件对象、事件流、事件委托、日期对象、节点操作、window对象、正则表达式、本地存储
移动端使用better-scroll后导致vue组件@click事件失效解决
weixin_42979149的博客
03-05 224
问题： 在移动端加了better-scroll后，better-scroll组件中的所有@click事件都失效了 解决： 在dom结构加载完成时才执行初始化 <div class="wrapper" ref="wrapper"> <div class="content"> <ul> <li></li> </ul> </div> </div> mounted() { th
Vue 之 移动端 better-scroll 下 click 事件失效问题（PC端却正常click点击）
仙魁XAN
06-26 937
Vue 之 移动端 better-scroll 下 click 事件失效问题（PC端却正常click点击）Vue 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。本节介绍，Vue 在PC 端在使用 better-scroll 下的 click 能正常点击，切换到移动端， better-scroll 下的 click点击却失效的简单处理 ，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。1、在使用better-scroll 进行页面过长的滚动预览，2、在 better-scroll 滚
解决better-scroll使真机测试浏览器click事件失效问题
二熊不是熊二的博客
03-16 814
今天在使用安卓真机测试时发现点击事件不生效，后来找到原因是因为better-scroll 默认会阻止浏览器的原生 click 事件。 better-srcoll官方文档： https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html#click 文档中介绍两个属性能帮助我们解决这个问题。 解决方法： 给bscroll...
BetterScroll简单学习应用
weixin_52263227的博客
02-11 842
基于原生js实现滚动效果在移动端可能会卡顿的背景下，使用BetterScroll实现滚动效果 BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。 BetterScroll 是使用纯 JavaScript 实现的，这意味着它是无依赖的。 Better-scroll的基本使用： 1.在需要使用的项目中
better-scroll 移动端滚动
NothingToSay
07-16 614
文章目录简介无法滚动问题better-scroll 1.x安装起步配置参数probeType 侦测滚动到的位置click 监听按钮点击pullUpLoad 上拉加载方法on() 监听当前实例上的事件finishPullUp() 上拉加载完成refresh() DOM改变后需要刷新 better-scrollscrollTo() 滚动到指定的位置事件钩子BScroll 1.x 与Vue结合异步数据的处理数据的动态更新路由跳转时记录离开时状态和位置BetterScroll 2.x 简介 better-scrol
vue使用 better-scroll的参数和方法
热门推荐
TionSu的博客
08-28 1万+
格式：let obj = new BScroll(object,{[option1,],.,.}); Options 参数 startX: 0 开始的X轴位置startY: 0 开始的Y轴位置scrollY: true 滚动方向为 Y 轴scrollX: true 滚动方向为 X 轴click: true 是否派发click事件，通常判断浏览器派发的click还是betterscr
vue使用better-scroll导致@click事件失效
nightwishh的博客
05-24 1421
解决办法： this.scroll=new BScroll(this.$refs.wrapper,{ click:true }) 在new一个BS对象的地方添加{click:true}即可 实测可行
vue使用better-scroll实现菜单列表左右联动
07-13
vue使用better-scroll实现菜单列表左右联动
Vue中使用better-scroll实现轮播图组件
10-15
better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。这篇文章主要介绍了Vue中使用better-scroll实现轮播图组件的实例代码,需要的朋友可以参考下
Vue项目中使用better-scroll实现一个轮播图自动播放功能
10-17
better-scroll是一个非常非常强大的第三方库 在移动端利用这个库 不仅可以实现一个非常类似原生ScrollView的效果 也可以实现一个...这篇文章主要介绍了Vue项目中使用better-scroll实现一个轮播图,需要的朋友可以参考下
【JavaScript源代码】vue开发移动端使用better-scroll时click事件失效的解决方案.docx
12-29
　在引入better-scroll的组件中使用@click事件的时候，点击事件失效，v-on:click、v-bind:click、@click.native都不行，试了一下@touchstart是却是可以的，发现better-scroll的配置中没有设置click：true，设置过...
vue中使用better-scroll实现滑动效果及注意事项
10-17
主要介绍了vue中使用better-scroll实现滑动效果，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
springboot(酒店管理系统)
04-25
开发语言：Java JDK版本：JDK1.8（或11） 服务器：tomcat 数据库：mysql 5.6/5.7（或8.0） 数据库工具：Navicat 开发软件：idea 依赖管理包：Maven 代码+数据库保证完整可用，可提供远程调试并指导运行服务（额外付费）～ 如果对系统的中的某些部分感到不合适可提供修改服务，比如题目、界面、功能等等... 声明： 1.项目已经调试过，完美运行 2.需要远程帮忙部署项目，需要额外付费 3.本项目有演示视频，如果需要观看，请联系我 4.调试过程中可帮忙安装IDEA，eclipse，MySQL，JDK，Tomcat等软件 重点： 需要其他Java源码联系我，更多源码任你选，你想要的源码我都有！ 需要加v19306446185
BP神经网络matlab实例.doc
最新发布
04-25
数学模型算法
设计.zip
04-25
设计.zip
vue vue-better-scroll 左右侧菜单联动demo
09-03
Vue是一种用于构建用户界面的渐进式JavaScript框架，它可以帮助开发者更高效地构建单页面应用程序。而vue-better-scroll是基于Vue的一款优秀的滚动插件，它能够实现更流畅的滚动效果，并且支持上下左右的滚动和联动效果。 如果需要实现左右侧菜单的联动效果，我们可以通过使用vue-better-scroll的scrollToElement方法来实现。首先，我们需要在Vue中引入vue-better-scroll插件并进行配置。 在Vue实例的data中，我们可以定义左右两个菜单的数据，例如leftMenu和rightMenu，并在created生命周期中初始化数据。然后，在mounted生命周期中，我们可以通过refs属性获取到两个菜单容器的DOM元素。 接下来，我们需要监听左边菜单的点击事件，当点击左边菜单的某个选项时，我们可以通过调用vue-better-scroll的scrollToElement方法，将右边菜单滚动到对应的位置。通过传递目标元素的选择器或具体的DOM元素，我们可以实现左右菜单的联动效果。 具体实现时，我们可以在左边菜单的点击事件中，使用this.$refs来访问右边菜单容器，并调用scrollToElement方法，将目标元素滚动到可视区域。通过传递选择器或具体DOM元素作为参数，我们可以精确控制滚动的位置。 同时，为了视觉上更好的效果，我们还可以给目标元素添加样式，如高亮当前选中项，以提升用户体验。 最后，通过一系列的事件处理和样式设置，我们就可以实现左右侧菜单的联动demo了。 以上就是使用Vue和vue-better-scroll实现左右侧菜单联动demo的大致思路和步骤。通过合理运用这两个工具，我们可以轻松地实现出一个流畅、友好的用户界面效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

太想进步了

新人菜鸡一枚，相互学习进步啊

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值