javascriptwebmobile

How to completely remove mobile browser long-press vibration?

I'm trying to completely 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

Solution

  • 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";
});