Question

在Chrome更新到版本73之后，不会触发bxSlider的内部项目单击事件。如何为新的Chrome中的元素触发.on（'click'）事件？

在幻灯片移动时会在Chrome中触发。在FireFox中一切都很好

<div class="slider-pager">
  <div class="slider-pager__item"><img src="1.jpg" alt=""></div>
  <div class="slider-pager__item"><img src="2.jpg" alt=""></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: '←'

        });
  $('.slider-pager__item').on('click', function (event) {
    //Don't fire in Chrome 73, works in FireFox
            $('.slider-pager__item').removeClass('active');
            $(this).addClass('active');

        });
</script>

JS小提琴https://jsfiddle.net/sergey_beloglazov/3ty7w12z/17/

更新：我为此滑块做了一个解决方法，处理包装器onClick事件：

$('.slider-pager').parent().on('click', function (event) {
    var $hover_item = $('.slider-pager__item:hover');
    //Проверяем, нашли ли элемент
    if ($hover_item.length>0){
        selectBxPagerItem($hover_item);
    }
});

$('.slider-pager__item').on('click', function (event) {
    selectBxPagerItem($(this));
});

selectBxPagerItem（）-是一个选择功能。对于带有单击颜色框的滑块，我进行了类似的单击仿真：

        $('.slider-for').parent().on('click', function (event) {
            var $hover_item = $('.slider-for__item:hover a');
            if (($hover_item.length>0)&&(!window.slider_for_click_imitation)){
                window.slider_for_click_imitation=true;
                $hover_item.click();
            }
            window.slider_for_click_imitation=false;
        });

Answer 1

貌似最新的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
        });

我建议密切关注/贡献此线程以获取更新和更好的解决方案： https://github.com/stevenwanderski/bxslider-4/issues/1240

Answer 2

我改用mousedown事件

if(window.navigator.userAgent.toLowerCase().indexOf("chrome") > 0) {
    $("body").on("mousedown", ".bx-viewport a", function() { 
        if($(this).attr("href") && $(this).attr("href") != "#") {
            window.location=$(this).attr("href"); 
        } 
    }); 
}

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

2 个答案: