From 0be67f1036ca105000f8f3bc222493cd128cd519 Mon Sep 17 00:00:00 2001 From: Navid Zolghadr Date: Wed, 15 May 2019 12:31:47 -0400 Subject: [PATCH 1/3] Set pointer capture on the right target Set the pointer capture on the slider itself only when we are in the swiping mode. The ensures not only clicks would work on elements such as links within the slider if user hasn't moved the pointer, but also disable activating and navigating to the links within the slider if the user has started the slider move on an embedded link within the slider. --- src/js/jquery.bxslider.js | 39 +++++++++++++++++++++++++++++---------- 1 file changed, 29 insertions(+), 10 deletions(-) diff --git a/src/js/jquery.bxslider.js b/src/js/jquery.bxslider.js index 8a039aa9..b49f04ab 100644 --- a/src/js/jquery.bxslider.js +++ b/src/js/jquery.bxslider.js @@ -30,6 +30,7 @@ responsive: true, slideZIndex: 50, wrapperClass: 'bx-wrapper', + sliderSlopSize: 5, // TOUCH touchEnabled: true, @@ -1117,19 +1118,22 @@ slider.touch.originalPos = el.position(); var orig = e.originalEvent, touchPoints = (typeof orig.changedTouches !== 'undefined') ? orig.changedTouches : [orig]; - var chromePointerEvents = typeof PointerEvent === 'function'; - if (chromePointerEvents) { - if (orig.pointerId === undefined) { - return; - } - } + var PointerEventsSupported = typeof PointerEvent === 'function'; + if (PointerEventsSupported) { + if (orig.pointerId === undefined) { + // Skip touch events as the rest of the code runs with pointer events already. + return; + } + } // record the starting touch x, y coordinates slider.touch.start.x = touchPoints[0].pageX; slider.touch.start.y = touchPoints[0].pageY; - if (slider.viewport.get(0).setPointerCapture) { + // This captures the event stream to the target to make sure even if the pointer leaves + // the slider bounday in the very next move it still keeps the events. + if (e.target.setPointerCapture) { slider.pointerId = orig.pointerId; - slider.viewport.get(0).setPointerCapture(slider.pointerId); + e.target.setPointerCapture(slider.pointerId); } // store original event data for click fixation slider.originalClickTarget = orig.originalTarget || orig.target; @@ -1182,8 +1186,23 @@ yMovement = Math.abs(touchPoints[0].pageY - slider.touch.start.y), value = 0, change = 0; - // this is swipe - slider.hasMove = true; + + if (xMovement > slider.settings.sliderSlopSize || yMovement > slider.settings.sliderSlopSize) { + // From now on all moves will be considered swipe. + slider.hasMove = true; + + // Capture the pointerevent stream to the slider instead of the element that the pointerdown + // started on. This ensures the start element such as link doesn't get activated when user + // is done with swiping the slider and releases the pointer. + if (slider.viewport.get(0).setPointerCapture && typeof orig.pointerId !== 'undefined') { + slider.viewport.get(0).setPointerCapture(slider.pointerId); + } + } + + // Only move the slider if we determined that we are in swipe mode. This ensures + // users can still click/tap on links even if the pointer moves within sliderSlopSize. + if (!slider.hasMove) + return; // x axis swipe if ((xMovement * 3) > yMovement && slider.settings.preventDefaultSwipeX) { From 10a995756e8cb563981d8a248e0a3a3e9269cf6f Mon Sep 17 00:00:00 2001 From: Navid Zolghadr Date: Wed, 15 May 2019 15:11:20 -0400 Subject: [PATCH 2/3] Fix typo --- src/js/jquery.bxslider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/jquery.bxslider.js b/src/js/jquery.bxslider.js index b49f04ab..96e3bd01 100644 --- a/src/js/jquery.bxslider.js +++ b/src/js/jquery.bxslider.js @@ -1130,7 +1130,7 @@ slider.touch.start.y = touchPoints[0].pageY; // This captures the event stream to the target to make sure even if the pointer leaves - // the slider bounday in the very next move it still keeps the events. + // the slider boundary in the very next move it still keeps the events. if (e.target.setPointerCapture) { slider.pointerId = orig.pointerId; e.target.setPointerCapture(slider.pointerId); From 6e1345016116c5668b5e9c18448afaf9b4c481cb Mon Sep 17 00:00:00 2001 From: Navid Zolghadr Date: Wed, 15 May 2019 15:38:05 -0400 Subject: [PATCH 3/3] Add the option to the readme --- readme.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/readme.md b/readme.md index a9ad34eb..37e2eca7 100644 --- a/readme.md +++ b/readme.md @@ -260,6 +260,14 @@ default: 'bx-wrapper' options: string ``` +**sliderSlopSize** + +Amount of pixels the pointer needs to exceed before the slider starts swiping. +``` +default: 5 +options: integer +``` + ### Pager **pager**