cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

improve the detection algorithm to consider touch area

Browse Source
This commit is contained in:
Shu Ding 2020-12-24 14:37:50 +08:00
parent eee3830613
commit 147632f929
No known key found for this signature in database
GPG Key ID: 899520937F032E83
1 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/product/ProductSlider/ProductSlider.tsx
View File

@ -21,9 +21,19 @@ const ProductSlider: FC = ({ children }) => {
// Stop the history navigation gesture on touch devices // Stop the history navigation gesture on touch devices
useEffect(() => { useEffect(() => {
const preventNavigation = (event: TouchEvent) => { const preventNavigation = (event: TouchEvent) => {
// Center point of the touch area
const touchXPosition = event.touches[0].pageX const touchXPosition = event.touches[0].pageX
if (touchXPosition > 10 && touchXPosition < window.innerWidth - 10) return // Size of the touch area
event.preventDefault() 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! sliderContainerRef.current!