From 147632f929ba9975c4b4d56ef6b75e720041c006 Mon Sep 17 00:00:00 2001 From: Shu Ding Date: Thu, 24 Dec 2020 14:37:50 +0800 Subject: [PATCH] improve the detection algorithm to consider touch area --- components/product/ProductSlider/ProductSlider.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/components/product/ProductSlider/ProductSlider.tsx b/components/product/ProductSlider/ProductSlider.tsx index d71542f17..0756edcda 100644 --- a/components/product/ProductSlider/ProductSlider.tsx +++ b/components/product/ProductSlider/ProductSlider.tsx @@ -21,9 +21,19 @@ const ProductSlider: FC = ({ children }) => { // Stop the history navigation gesture on touch devices useEffect(() => { const preventNavigation = (event: TouchEvent) => { + // Center point of the touch area const touchXPosition = event.touches[0].pageX - if (touchXPosition > 10 && touchXPosition < window.innerWidth - 10) return - event.preventDefault() + // Size of the touch area + const touchXRadius = event.touches[0].radiusX || 0 + + // We set a threshold (10px) on both sizes of the screen, + // if the touch area overlaps with the screen edges + // it's likely to trigger the navigation. We prevent the + // touchstart event in that case. + if ( + touchXPosition - touchXRadius < 10 || + touchXPosition + touchXRadius > window.innerWidth - 10 + ) event.preventDefault() } sliderContainerRef.current!