I'm trying to pletely remove the vibration that occurs on a long press of an element in a mobile browser.

Specifically, I have an image that I'm adding my own long-press functionality to, but the subtle short-vibrate that happens by default is interfering and I need to disable it.

I've successfully stopped the usual context menu from appearing by overriding it as follows:

window.oncontextmenu = function (event) {
  event.preventDefault();
  event.stopPropagation();
  return false;
};

I've also added CSS to stop highlights and text selection etc - but I haven't been able to figure out what's causing the default vibrate after a few hundred ms.

Is there another lifecycle event that's popped on a long-press in a mobile browser, in or around oncontextmenu?

Full plunker Example here, long-press on the image from a mobile browser (I'm using chrome on Android) to see what I mean:

I'm trying to pletely remove the vibration that occurs on a long press of an element in a mobile browser.

Specifically, I have an image that I'm adding my own long-press functionality to, but the subtle short-vibrate that happens by default is interfering and I need to disable it.

I've successfully stopped the usual context menu from appearing by overriding it as follows:

window.oncontextmenu = function (event) {
  event.preventDefault();
  event.stopPropagation();
  return false;
};

I've also added CSS to stop highlights and text selection etc - but I haven't been able to figure out what's causing the default vibrate after a few hundred ms.

Is there another lifecycle event that's popped on a long-press in a mobile browser, in or around oncontextmenu?

Full plunker Example here, long-press on the image from a mobile browser (I'm using chrome on Android) to see what I mean: https://plnkr.co/edit/y1KVPltTzEhQeMWGMa1F?p=preview

• javascript
• mobile

• 2 In Firefox is even worse. Instead of vibrating, Firefox for Android cancels the touch point (fires touchcancel)! – D. Pardal Commented Apr 7, 2019 at 14:57

3 Answers 3

Disable the text selection when its clicked on.

document.querySelector("#your_target").addEventListener("touchstart", (e) =>
{
    e.preventDefault();
    e.stopPropagation();
    this.style.userSelect = "none";
});

document.querySelector("#your_target").addEventListener("touchend", (e) =>
{
    e.preventDefault();
    e.stopPropagation();
    this.style.userSelect = "default";
});

NOT setting window.oncontextmenu on Android removed the long press vibration for me.

You still also need to set user-select: none.

You could use touch-action: none; in CSS. Then you might be able to handle an interaction event to do what you want.

https://developer.mozilla/en-US/docs/Web/CSS/touch-action