CODEWITHSUNDEEP
javascriptjquerymobiletouchmouseevent
Akin Hwan
Akin Hwan

Reputation: 627

Prevent pointerdown event from triggering on mobile when user tapholds and scrolls

Hello I have implemented a long press javascript event handler which is working perfectly fine. However, on mobile, users tap...hold... in order to scroll up or down. This scrolling interaction on mobile is unintentionally triggering my 'pointerdown' event. I've tried inserting a pointermove event in the chain of event handlers but that seems to trigger an arbitrary amount of times, depending on how long the user is moving their pointer while pointerdown, therefore I am unable to set a boolean that is reliable and doesn't flip back and forth.

let pressTimer;
this.myElements.on('pointerup', (e) => {
  clearTimeout(pressTimer);
}).on('pointerdown', (e) => {
  let myEl = $(e.currentTarget);
  let checkbox= myEl.find('.checkbox');
  pressTimer = window.setTimeout(() => {
    checkbox.click();
  }, 750)
});

Upvotes: 0

Views: 1156

Answers (1)

obscure
obscure

Reputation: 12891

You could add a global boolean variable which holds the current status of the pointer (maybe isPointerDown) and act accordingly. e.g. if it's true don't react to pointerdown and if there's a pointerup event reset this variable to false.

let pressTimer;
var isPointerDown = false;
this.myElements.on('pointerup', (e) => {
  clearTimeout(pressTimer);
  isPointerDown = false;
}).on('pointerdown', (e) => {
  if (!isPointerDown) {
    let myEl = $(e.currentTarget);
    let checkbox = myEl.find('.checkbox');
    pressTimer = window.setTimeout(() => {
      isPointerDown = true;
      checkbox.click();
    }, 750)
  }
});

Upvotes: 1

Related Questions