5

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

1 Answer 1

2

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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.