html/css/javascript您现在的位置是:主页 > html/css/javascript >
如何解决Chrome 73中bxSlider项目上的click事件的问题?
2022-03-07 21:16:57html/css/javascript 141人已围观
本文介绍了如何解决Chrome 73中bxSlider项目上的click事件的问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在Chrome更新到版本73之后,不会触发bxSlider的内部项目单击事件,也就是href超链接无效,但是火狐浏览器下正常。
如何为新的Chrome中的元素触发.on('click')事件?
当幻灯片在移动时会在Chrome中触发,在FireFox中一切都很好
<div class="slider-pager"> <div class="slider-pager__item"><a href="https://www.baidu.com/"><img src="1.jpg" alt=""></a></div> <div class="slider-pager__item"><a href="https://www.baidu.com/"><img src="2.jpg" alt=""></a></div> </div> <script> carouselProduct = $('.slider-pager').bxSlider({ maxSlides: 3, minSlides: 3, slideWidth: 90, infiniteLoop: false, moveSlides: 1, slideMargin: 8, pager: false, nextSelector: '.slider__nav--next', prevSelector: '.slider__nav--prev', nextText: '→', prevText: '←' }); </script>
推荐答案
貌似最新的Chrome更新使bxSlider内部的任何点击都以容器为目标,而不是容器内部的链接。
在选项中添加touchEnabled: false可以禁用滑动行为,但可以解决单击问题。例如:
carouselProduct = $('.slider-pager').bxSlider({ maxSlides: 3, minSlides: 3, slideWidth: 90, infiniteLoop: false, moveSlides: 1, slideMargin: 8, pager: false, nextSelector: '.slider__nav--next', prevSelector: '.slider__nav--prev', nextText: '→', prevText: '←', touchEnabled: false });
相关文章
随机图文
PbootCMS网站从宝塔转移后无法打开报错提示“No input file specifed”
使用宝塔备份程序后,默认会将user.ini文件一起打包进去。 搬家后会报错“No input file specifed” 这时我们需要检查根目录是不是含有user.ini文件,有的话删除掉,一般就可以了。如果还不行请尝试重启Apache或者Nginx服务。织梦多语言网站分页中文文字替换成英文
以下提供一种中文替换英文的方法,其他语言请自行修改调整 {dede:pagelist listitem="index,end,pre,next,pageno" listsize="3" function="str_replace(array('首页','上一页','下一页','末页','共','页','条记录'),array('Home','Pre','Next','Last','Total',pbootcms实现精确搜索全词匹配查询
pbootcms实现全词匹配精确搜索或查询,可用于证书查询,授权查询一类的功能。 搜索页面模板标签如下: {pboot:search field='title' fuzzy=0 scode=5} <a href="[search:link]">[search:title]</a> {/pboot:search} field='title'javascript让图片在手机端自动等比例缩小 不变形 不超出屏幕
文章内容中的图片在手机端自动等比例缩小 不变形 不超出屏幕宽度 <div class="article-content">{content:content}</div> <script> $('.article-content img').css({'max-width':'100%'}); $('.article-content img'