element, I encountered an issue using a slideshow component sourced from our components library. This component receives swipe events from a utility function that is initialized upon mounting. The problem arose while testing on a mobile phone - tapping a link within a slide triggered both a swipe event and a click event.
The utility function in question looks like this:
function initSwipeEvents(el, deltaMin = 80) {
const swipeData = {
startX: 0,
startY: 0,
endX: 0,
endY: 0,
}
let directionEvents = []
el.addEventListener("touchstart", (e) => {
const t = e.touches[0]
swipeData.startX = t.screenX
swipeData.startY = t.screenY
})
el.addEventListener("touchmove", (e) => {
const t = e.touches[0]
swipeData.endX = t.screenX
swipeData.endY = t.screenY
})
el.addEventListener("touchend", () => {
const deltaX = swipeData.endX - swipeData.startX
const deltaY = swipeData.endY - swipeData.startY
if (Math.abs(deltaX) > deltaMin) {
if (deltaX > 0) directionEvents.push("right")
else directionEvents.push("left")
}
if (Math.abs(deltaY) > deltaMin) {
if (deltaY > 0) directionEvents.push("down")
else directionEvents.push("up")
}
directionEvents.forEach((direction) =>
el.dispatchEvent(new Event(`swipe-${direction}`))
)
directionEvents = []
})
}
export default initSwipeEvents
The slideshow component implementation is as follows:
Inside the slot of the slideshow component, there is a custom image component wrapped in a Nuxt Link. To address the issue of the unwanted swipe event triggering when clicking the link, modifications were made to the initSwipeEvents function by adding specific conditions to prevent the default action for touch events on the link element.
Despite these adjustments, the problem persists, leading me to believe that the scope of the utility function may need refinement. Additionally, attempting to isolate the issue by logging click events while targeting the slideshow div yielded unexpected results compared to utilizing wheel events.
I am unsure whether the necessary changes should be applied to the utility function or directly within the slideshow component itself. Your guidance on how best to approach this issue would be greatly appreciated.