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

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>

JSFiddlehttps://jsfiddle.net/sergey_beloglazov/3ty7w12z/17/

UPDATE:我已经为此滑块制定了解决方法，处理包装器 onClick 事件：

$('.slider-pager').parent().on('click', function (event) {
    var $hover_item = $('.slider-pager__item:hover');
    //Checking if we have found the element
    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;
        });

2019.07.20 更新：我最近发现，以前的解决方案现在不起作用。 我检查了一下，发现内部元素没有:hover状态; 所以，还有另一种解决方案鼠标移到 event

/* A Chrome bx slider bug workaround */

//A slide, that has the mouse pointer over
window.bxslider_mouse_over_slide=null;
$(function() {
    $('.slider-pager div').mouseover(
        function(event) {
            window.bxslider_mouse_over_slide=$(this);
        });

});
$('.slider-pager').parent().on('click', function (event) {
    //Check if we've got a slide under the mouse
    if ((window.bxslider_mouse_over_slide!=null)){
            $('.slider-pager__item').removeClass('active');
        window.bxslider_mouse_over_slide.addClass('active');
    }
});

采取解决方法，我发现当我点击横幅时，鼠标移到事件触发，然后才处理点击事件。所以那一刻幻灯片没有:hover状态。所以我只保存最后一个悬停的横幅。 检查解决方案：https://jsfiddle.net/sergey_beloglazov/5kmdacgn/22/

看起来最新的 Chrome 更新使 bxSlider 内的任何点击都指向容器而不是其中的链接。

Adding 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