I have a web application that has some interactions where the user is required to long press / hold on the screen to progress, this all works fine, however on WeChat in China, and similar browser/webviews like Tencent (X5), a context menu appears when holding the screen.
I've tried the following code (and all variations inside the event):
// Long press, then the following code executes
document.addEventListener('contextmenu', (e) => {
alert('Right click');
e.preventDefault();
e.stopPropagation();
return false;
});
// As soon as the alert is dismissed, the context menu still appears
The alert pops up immediately before the app's context menu, but I'm still unable to prevent it from happening.
Any help here would be greatly appreciated. I know WeChat for Android in China has a native Javascript bridge, and other quirks can be disabled with custom attributes etc, I've just not been able to fix this one.
This can easily be tested using https://play.google.com/store/apps/details?id=com.tencent.mtt (works outside of China).
Thanks
This did the trick for me:
element.addEventListener('touchstart', (e) => {
e.stopPropagation();
e.preventDefault();
// Trigger desired event here
});
The cancelling the touchstart event seems to make the browser think that the pointer is no longer being pressed, rather than attempting to cancel any actions based on the long press event. You can replace the element with the body to prevent it happening on everything, but this probably isn't recommended (UX + other side effects).