如何解决Chrome 73中bxSlider项目上的click事件的问题? [英] How to fix problem with clicking event on bxSlider item in Chrome 73?

问题描述

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

A bxSlider's inner item click event doesn't fire after Chrome has updated to version 73. How can I fire .on('click') event for elements in new Chrome?

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

It fires in Chrome when slides are moving. Everyting is fine in 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 Fiddle https://jsfiddle.net/sergey_beloglazov/3ty7w12z/17/

JS Fiddle https://jsfiddle.net/sergey_beloglazov/3ty7w12z/17/

更新: 我为此滑块做了一个变通方法，处理包装器onClick事件:

UPDATE: I have made a workaround for this slider, handling wrapper onClick event:

$('.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()-是一个选择函数. 对于点击时带有颜色框的滑块，我做了类似的点击仿真:

selectBxPagerItem() - is a selecting function. For a slider with colorbox on click, I have made a similar click emulation:

        $('.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 状态； 因此， mouseover 事件

UPDATE 2019.07.20: I've found out recently, that previous solution doesn't work now. I've cheked it and discover, that inner elements have no :hover state; So, there is another soulution with mouseover 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');
    }
});

一种解决方法，我发现当我点击横幅广告时，会触发一个 mouseover 事件，然后才处理click事件.这样一来，幻灯片就没有:hover 状态.所以我只保存上一个悬停的横幅. 检查解决方案: https://jsfiddle.net/sergey_beloglazov/5kmdacgn/22/

Making a workaround, I've found out that when I click on banner, a mouseover event triggers, and only then it handles a click event. So that that moment slide has no :hover state. So I just save last hovered banner. Check the solution: https://jsfiddle.net/sergey_beloglazov/5kmdacgn/22/

推荐答案

貌似最新的Chrome更新使bxSlider内部的任何点击都以容器为目标，而不是容器内部的链接.

Looks like the latest Chrome update made any click inside bxSlider target the container instead the link inside it.

在选项中添加touchEnabled: false可以禁用滑动行为，但可以解决单击问题.例如:

Adding touchEnabled: false to the options disables the swipe behaviour, but solves the click issue. Eg.:

 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

I recommend keeping an eye/contributing to this thread for updates and better solutions: https://github.com/stevenwanderski/bxslider-4/issues/1240

这篇关于如何解决Chrome 73中bxSlider项目上的click事件的问题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！