Question 160972 in Html Question posted in
Some basic documentation can be found here.

Does HTML have a Javascript Listener for holding/touching down on an element?

I’m working on a little app, where I go left while holding on a text/button.

HTML:

<h1 style="color:white;" id="goLeft">Left</h1>

JS:

document.querySelector('#goLeft').addEventListener('touchstart', function(){
    simulateKeyDown('a')
})
document.querySelector('#goLeft').addEventListener('mousedown', function(){
    simulateKeyDown('a')
})
document.querySelector('#goLeft').addEventListener('touchstop', function(){
    simulateKeyUp('a')
})
document.querySelector('#goLeft').addEventListener('mouseup', function(){
    simulateKeyUp('a')
})

Now while that works great on desktop (holding down on the h1 tag and releasing), it doesn’t fully work as intended on phone, which touch. When just touching the selector of a short time, so pressing "Left" for only a fraction of a second, it works. However, when holding on the left button for a bit longer and I release it afterwards, my characters keeps moving to the right, so the event never seems to be triggered. My best guess is that is because of a long touch on the element, as with being able to mark and copy something.

What I’ve tried is changing the h1 to a button, with no changes.

Also, I forbid user selection in CSS:

-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */

That also didn’t change something for that specific behaviour, although I’ll leave it like that.

How can I prevent that "long touch" to be executed and make sure, that the touchstop event is actually fired, when I release the button/h1?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Okay, nevermind, seems like I solved it myself... It seems like touchstop is not the right event - instead it has to be touchend - it works now! :)


  2. 0

    You should define a listener to touchend in order to works proper.

    I did this in React + typescript, maybe you can adapt to your scenario.

    import { TouchEvent, useState } from 'react'

interface SwipeInput {
    onSwipedLeft: () => void
    onSwipedRight: () => void
    onSwipedUp: () => void
    onSwipedDown: () => void
}

interface SwipeOutput {
    onTouchStart: (e: TouchEvent) => void
    onTouchMove: (e: TouchEvent) => void
    onTouchEnd: () => void
}

const MySwipe = (input: SwipeInput): SwipeOutput => {
    const minSwipeDistance = 50
    const [touchStart, setTouchStart] = useState<number>(0)
    const [touchEnd, setTouchEnd] = useState<number>(0)
    const [touchVertStart, setTouchVertStart] = useState<number>(0)
    const [touchVertEnd, setTouchVertEnd] = useState<number>(0)

    const onTouchStart = (e: TouchEvent) => {
        setTouchEnd(0)
        setTouchStart(e.targetTouches[0].clientX)

        setTouchVertEnd(0)
        setTouchVertStart(e.targetTouches[0].clientY)
    }

    const onTouchMove = (e: TouchEvent) => {
        setTouchEnd(e.targetTouches[0].clientX)
        setTouchVertEnd(e.targetTouches[0].clientY)
    }

    const onTouchEnd = () => {
        if (!touchStart || !touchEnd) return
        if (!touchVertStart || !touchVertEnd) return

        const distance = touchStart - touchEnd
        const isLeftSwipe = distance > minSwipeDistance
        const distanceVert = touchVertStart - touchVertEnd
        const isUpSwipe = distanceVert > minSwipeDistance
        if (Math.abs(touchStart - touchEnd) > Math.abs(touchVertStart - touchVertEnd)) {
            if (isLeftSwipe) {
                input.onSwipedLeft()
            } else {
                input.onSwipedRight()
            }
        } else {

            if (isUpSwipe) {
                input.onSwipedUp()
            } else {
                input.onSwipedDown()
            }
        }
    }

    return {
        onTouchStart,
        onTouchMove,
        onTouchEnd
    }
}export default MySwipe
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search