CODEWITHSUNDEEP
javascripthtmlmobileuser-interaction
J. Maria
J. Maria

Reputation: 416

Pointerup event not triggered after scrolling

I have a web interface with a set of buttons that must be pressed for some time to work. The job of the buttons is to send a signal if they've been pressed for more than a second and send the opposite value of the signal after that.

<div class="row">
    <div class="col">
        <button class="btn btn-secondary" name='button1' type="button">Butt. A</button>
    </div>
</div>
<div class="row">
    <div class="col">
        <button class="btn btn-secondary" name='button2'>Butt. 2</button>
    </div>
</div>

The JS looks a bit like this.

$("button").on("pointerdown", handlePointerDown);
$("button").on("pointerup", handlePointerUp);

function handlePointerDown(event){
    event.preventDefault();
    console.log("Handle Pointer Down triggered");
    //something something something
}

function handlePointerUp(event){
    event.preventDefault();
    console.log("Handle Pointer Up triggered");
    //something something something
}

My issue here is that when I'm testing the app for mobile (either on a real phone or in the mobile mode of Chrome console), I've noticed that, because of the long press, sometimes the user scrolls slightly on the screen (think about a user which presses the button, and because they have to hold it, they move their finger barely a couple of millimeters on the screen, enough to trigger the scroll). This scroll apparently disables/interrupts the natural sequence of events (the user presses the button -> handlePointerDown is triggered; the user releases a button -> handlePointerUp is triggered), hence handlePointerUp is not called.

Can I fix it without having the page "kidnapping" my pointerup event?

Upvotes: 1

Views: 319

Answers (0)

Related Questions