javascript - How to fix problem with clicking event on bxSlider item in Chrome 73? - Stack Overflow

admin管理员组

文章数量:1195300

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?

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 /

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() - 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;
        });

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');
    }
});

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: /

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?

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/

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() - 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;
        });

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');
    }
});

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/

• javascript
• jquery
• google-chrome
• bxslider

Share Improve this question Follow edited Jul 19, 2019 at 22:49 Sergei Beloglazov asked Mar 28, 2019 at 2:43 Sergei BeloglazovSergei Beloglazov 36211 gold badge33 silver badges1515 bronze badges 2

• I have made a workaround for this slider: ``` $('.slider-pager').parent().on('click', function (event) { var $hover_item = $('.slider-pager__item:hover'); //Проверяем, нашли ли элемент if ($hover_item.length>0){ selectBxPagerItem($hover_item); } }); ``` – Sergei Beloglazov Commented Mar 28, 2019 at 4:08
• I found this solution and it works: "It works on Chrome when you add touchEnabled: false" support.google.com/chrome/thread/3211737/… но и ваше решение тоже работает – Eugene Kapustin Commented Apr 8, 2022 at 1:06

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 16

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

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
        });

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

I used the mousedown event instead

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"); 
        } 
    }); 
}

$('.bxslider').bxSlider({
    touchEnabled: false,
});

本文标签： javascriptHow to fix problem with clicking event on bxSlider item in Chrome 73Stack Overflow