Блог

Событие щелчка по внутреннему элементу bxSlider не запускается после обновления Chrome до версии 73. Как я могу запустить событие .on (‘click’) для элементов в новом Chrome?

Он срабатывает в 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 Fiddle https://jsfiddle.net/sergey_beloglazov/3ty7w12z/17

ОБНОВЛЕНИЕ: я создал обходной путь для этого слайдера, обрабатывающий событие 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)amp;amp;(!window.slider_for_click_imitation)){
                window.slider_for_click_imitation=true;
                $hover_item.click();
            }
            window.slider_for_click_imitation=false;
        });

  

ОБНОВЛЕНИЕ 2019.07.20:
Недавно я узнал, что предыдущее решение сейчас не работает.
Я проверил это и обнаружил, что внутренние элементы не имеют состояния: hover;
Итак, есть еще одна проблема с событием наведения курсора мыши

 /* 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 нацеленным на контейнер, а не на ссылку внутри него.

Добавление 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

Вместо этого я использовал событие mousedown

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