【swiper下（E charts）点击事件失效问题】

最新推荐文章于 2023-07-03 09:05:08 发布
最新推荐文章于 2023-07-03 09:05:08 发布
阅读量747 收藏 2
点赞数 3
分类专栏： vue JavaScript 前端 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43458637/article/details/122285484
版权
vue 同时被 3 个专栏收录
13 篇文章 0 订阅
订阅专栏
JavaScript
12 篇文章 0 订阅
订阅专栏
前端
12 篇文章 0 订阅
订阅专栏

在vue里面使用了E charts，想着做一个轮播图，就使用了swiper
结果轮播图OK了 但是点击事件没反应了
也想到是事件的类似冒泡 捕获的设置 但是迟迟没有找到
看了一些资料 才发现
原来swiper下有相关设置

touchStartPreventDefault:false //添加这个属性 不阻止事件

官方是这么介绍的
阻止touchstart (mousedown)的默认事件，设置为false则不阻止。
touchStartPreventDefault信息

类型：boolean 默认：true 举例：false 启用版本：4.4.0

好了。就这样就可以正常了

可笑万物
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
swiper 解决动态加载数据滑动失效的问题
01-19
1、数据加载后进行swiper初始化 success:function(result){ var resultdata =eval((+result+)); if(resultdata.status == 1){ var dataList = resultdata.data; currentPage = resultdata.currentPage; ...
swiper下echarts点击事件失效
qq_42649528的博客
07-28 1001
因为swiper版本过高 建议切换为3的版本 npm i swiper@3.4.2 --save ```切换之后注意版本变化导致api的变化 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200728112508260.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjQ5NTI4,siz
vue项目中echarts点击事件失效解决办法
qq_25691983的博客
01-11 1939
https://www.cnblogs.com/hpx2020/p/12877155.html
echart 绑定点击事件无效，原因是属性设置错误
Bright2017的博客
12-03 7399
最近做的项目需要联动两个图表，点击在折线图或者柱状图柱子上，触发事件。 正常做法就是给图表绑定上click事件即可，但这次绑定后却无效。 最终发现是属性设置问题 silent:true// 是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 改为true或者干脆不设置这个属性即可。 子组件中 this.$emit("loadedChart", this.charts); 在组件上绑定事件 @loadedChart="manufactorClick" manuf...
vue echarts和vue-echarts鼠标事件不生效
Br不二
11-23 1021
不论是在vue还是vue3中，vue-echarts都比echarts获取元素后要多一步操作
swiper在angularjs中使用循环轮播失效的解决方法
10-17
今天小编就为大家分享一篇swiper在angularjs中使用循环轮播失效的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
swiper在vue项目中loop循环轮播失效的解决方法
10-18
今天小编就为大家分享一篇swiper在vue项目中loop循环轮播失效的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
基于swiper上下图轮播共转插件
05-23
轮播共转插件，分为两块，导航模块可以随着图片模块滑动轮转而调到特定导航按钮（按钮可自定义，如：图片）。超出屏幕的导航块会自动跳转回来。
解决Echarts地图区域点击事件无效 && geo.lable.formatter无效
Zaqenenen的博客
03-07 6357
需求：获取echarts当前点击城市名称 bug：Echarts地图区域点击事件无效，添加.getZr()后又无法获取到地图当前点击城市。 这个我看了一些资料，说是版本问题，，，然鹅我下了几个最新echarts版本都无效。怀疑是我加了自定义区域让它点不中了？？ 解决： //添加.getZr()之后，又获取不到params中当前点击城市 let self=this; this.chart.getZr().on('click', function (params) { console.log('好的终于点击到
可以实现鼠标悬停、MouseDown、MouseUp 的图片切换的ImageButton类
12-28
可以实现鼠标悬停、MouseDown、MouseUp 的图片切换
微信小程序中使用echarts，ios真机在swiper 组件上无法滑动图表
筱✿熙
01-28 852
开发过程中，在模拟器和Android真机上使用图表在swiper组件中滑动没有遇到任何问题，结果同事拿了iOS测试使用出现无法滑动的问题 因此查看了echarts官方文档和小程序官方文档 最后得到解决方法在设置图表属性的时候设置disableTouch的属性为true即可 ec: { disableTouch: true, }, 这样就可以解决在iOS真机上无法滑动的问题 希望遇到同样问题的同胞不要花费很多时间 ...
微信小程序swiper,scroll中使用echarts遇到的问题
longlong729的博客
07-30 685
1.canvas 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。 2.请勿在 scroll-view、swiper、picker-view、movable-view 中使用 canvas 组件。 3. css 动画对 canvas 组件无效。 4.避免设置过大的宽高，在安卓下会有crash的问题 解决途径就是不适用以上不支持的组件 解决方案: 使用点击实现swiper效果 使用页面自动高度滚动条来替代scroll-view 本人暂时能想到的解决办法就这些了,欢迎评论区共
mpvue-echarts放在小程序swiper苹果真机不能滑动问题
u014446094的博客
03-25 991
主要原因：是在于canvas放在swiper里面苹果不能滑动，包括swiper-item的点击事件也触发不了，我看了微信社区也有不少人有这个问题，经过我的测试我推测是由于canvas作为原生组件层级太高盖过了swiper所以无法滑动（安卓能滑动）。 解决mpvue-echarts不能放swiper的方法：使用wx.canvasToTempFilePath把图表转换成图片就可以滑动了，不过由于图表渲...
echarts@5 动画失效
最新发布
weixin_41886421的博客
07-03 1212
echarts@5 动画失效
echarts饼图点击图例事件第一次没反应，第二次才执行（angular版本）【问题笔记】
yuyu的博客
05-24 1266
饼图点击图例事件第一次没反应，第二次才执行
微信小程序echarts问题整理与解决
YogurtQ的博客
04-30 4003
1. Canvas图层遮盖问题 由于canvas属于原生组件，原生组件拥有最高的层级，页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上，所以
微信小程序 swiper组件 修改指示器圆点的样式位置等
天空之上有座城
06-29 4773
前言 微信小程序的swiper组件，官方文档没有给具体的配置接口，有时我们需要一些个性化的样式，看到某位大佬曾在 开放工具中看到了小圆点的class类名，现在似乎是看不到了，不过类名还可以使用 附上原文地址 http://www.qianduan8.com/1009.html 解决方案 一种是隐藏官方的指示点即把 indicator-dots=“{{false}}”传入swiper组件，自己写小圆点指示器的样式，然后通过 bindchange 监听swiper变化，动态更新小圆点样式 一种..
【echarts】xAxis鼠标事件失效问题
zhaojingj_的博客
02-02 758
echarts中xAxis无法触发鼠标事件
vue使用swiper循环模式下，使用click事件点击失效
03-30
2. 将swiper的loopedSlides参数设置为实际slide的数量，这样就不会复制slide，也就不会出现click事件失效的情况了： ``` new Swiper('.swiper-container', { loop: true, loopedSlides: 4, // 实际slide的数量 /...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值