Not clickable main image in Chrome (fix solution inside)

[skachkov]

example: https://clip2net.com/s/41zKeaB

Solution:

in jquery.bxslider.js in function var onTouchStart = function(e) { (line 1103) change : slider.viewport.on('touchmove MSPointerMove pointermove', onTouchMove); to: slider.viewport.on('touchmove MSPointerMove pointermove', onTouchMove,{ passive: true });

thanks to : https://stackoverflow.com/questions/39152877/consider-marking-event-handler-as-passive-to-make-the-page-more-responsive

[AdolfoHerreraB]

how can i add passive by min version 4.2.12

https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js

                s.touch.originalPos = o.position();
                var e = t.originalEvent
                  , i = "undefined" != typeof e.changedTouches ? e.changedTouches : [e];
                s.touch.start.x = i[0].pageX,
                s.touch.start.y = i[0].pageY,
                s.viewport.get(0).setPointerCapture && (s.pointerId = e.pointerId,
                1 === s.pointerId && s.viewport.get(0).setPointerCapture(s.pointerId)),
  **[Line:  537]**      s.viewport.bind("touchmove MSPointerMove pointermove", V),
                s.viewport.bind("touchend MSPointerUp pointerup", R),
                s.viewport.bind("MSPointerCancel pointercancel", Y)

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% R = function(t) { [Line:564] s.viewport.unbind("touchmove MSPointerMove pointermove", V), s.controls.el.removeClass("disabled"); var e = t.originalEvent , i = "undefined" != typeof e.changedTouches ? e.changedTouches : [e] , n = 0 , r = 0; s.touch.end.x = i[0].pageX, s.touch.end.y = i[0].pageY, "fade" === s.settings.mode ? (r = Math.abs(s.touch.start.x - s.touch.end.x), r >= s.settings.swipeThreshold && (s.touch.start.x > s.touch.end.x ? o.goToNextSlide() : o.goToPrevSlide(), o.stopAuto())) : ("horizontal" === s.settings.mode ? (r = s.touch.end.x - s.touch.start.x, n = s.touch.originalPos.left) : (r = s.touch.end.y - s.touch.start.y, n = s.touch.originalPos.top), !s.settings.infiniteLoop && (0 === s.active.index && r > 0 || s.active.last && r < 0) ? S(n, "reset", 200) : Math.abs(r) >= s.settings.swipeThreshold ? (r < 0 ? o.goToNextSlide() : o.goToPrevSlide(), o.stopAuto()) : S(n, "reset", 200)), s.viewport.unbind("touchend MSPointerUp pointerup", R), s.viewport.get(0).releasePointerCapture && s.viewport.get(0).releasePointerCapture(s.pointerId) } %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% by debuggin via inspector google , the lines 537 and 564 are triggered by clciking (not work via mouse click only via touch screen laptop )

fires first the line 537 and call jquery external library

[AdolfoHerreraB]

if change touchEnabled = 0 as suggested varios posts of stackoverflow and git works, but i dont know if works for touch screen laptop, the proof was on other laptop person, if im clicking on random area several times works the follow link sometimes by force

[dertin]

I wonder if you can have the "touchEnabled" option set to true and the images in the slider have links.

When applying the patch '..., { passive: true }' on v4.2.15 I get the next error when moving the mouse over the slider. Uncaught TypeError: ((k.event.special[o.origType] || {}).handle || o.handler).apply is not a function

我想知道你是否可以将“touchEnabled”选项设置为true并且滑块中的图像具有链接。

在v4.2.15上应用补丁'...，{passive：true}'时，将鼠标移到滑块上时会出现下一个错误。 Uncaught TypeError: ((k.event.special[o.origType] || {}).handle || o.handler).apply is not a function

+1

[joeldavuk]

This isn't a fix at least for the latest version, there seems to be two issues that relate to each other fixing one breaks the other with some of the suggested solutions.

https://github.com/stevenwanderski/bxslider-4/issues/1248 https://github.com/stevenwanderski/bxslider-4/issues/1246 https://github.com/stevenwanderski/bxslider-4/issues/1240

The two issues are:

1. Not being able to click on links inside the slide on the first click
2. Not being able to scroll in iOS

I can confirm with the latest version line 1109, commenting out e.preventDefault(); to fix scroll issue and modifying onTouchMove adding a 3 pixel allowance.

var onTouchMove = function(e) {
            var orig = e.originalEvent,
                touchPoints = (typeof orig.changedTouches !== 'undefined') ? orig.changedTouches : [orig],
                // if scrolling on y axis, do not prevent default
                xMovement = Math.abs(touchPoints[0].pageX - slider.touch.start.x),
                yMovement = Math.abs(touchPoints[0].pageY - slider.touch.start.y),
                value = 0,
                change = 0;

            // this is swipe
            if((xMovement > yMovement && xMovement > 3) || (yMovement > xMovement && yMovement > 3)) {
                slider.hasMove = true;
            }

            // x axis swipe
            if ((xMovement * 3) > yMovement && slider.settings.preventDefaultSwipeX) {
                e.preventDefault();
                // y axis swipe
            } else if ((yMovement * 3) > xMovement && slider.settings.preventDefaultSwipeY) {
                e.preventDefault();
            }

            if (e.type !== 'touchmove') {
                e.preventDefault();
            }

            if (slider.settings.mode !== 'fade' && slider.settings.oneToOneTouch) {
                // if horizontal, drag along x axis
                if (slider.settings.mode === 'horizontal') {
                    change = touchPoints[0].pageX - slider.touch.start.x;
                    value = slider.touch.originalPos.left + change;
                    // if vertical, drag along y axis
                } else {
                    change = touchPoints[0].pageY - slider.touch.start.y;
                    value = slider.touch.originalPos.top + change;
                }
                setPositionProperty(value, 'reset', 0);
            }
        };

This seems to work on Chrome, IE11, Firefox, iOS all latest versions +/- two versions.

[ayyilmaz]

Remove or comment this line [ at 1074 ] or change. My problem has solved by this. slider.viewport.bind('touchstart MSPointerDown pointerdown', onTouchStart); Click to see screenshot: 4.1.12 click link problem solvement