html/css/javascript您现在的位置是：主页 > html/css/javascript >

如何解决Chrome 73中bxSlider项目上的click事件的问题?

2022-03-07 21:16:57html/css/javascript 699人已围观

本文介绍了如何解决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
        });