Firefox context menu event also fires click handler.

[patrickdavey]

Version

2.6.10

Reproduction link

https://codesandbox.io/s/v63jz95o37

Steps to reproduce

In the sandbox link, using Firefox, right click on the text, you'll see both the contextmenu click handler called, and the body click handler setup in the mounted hook.

What is expected?

It is expected that only the contextmenu handler should be called.

What is actually happening?

The contextmenu and body "click" handler are called. This only happens in Firefox.

---

There is a bug listed against Mozilla for this -> https://bugzilla.mozilla.org/show_bug.cgi?id=184051 but, it's 17 years old so perhaps it's a hard one to fix. Other frameworks (I looked at Rails -> rails/rails#34573 and Inferno -> infernojs/inferno#1273 ) seem to have put a fix in place for this behavior.

Totally fair enough if this is a "won't fix" as it really is a Firefox issue, but, if Vue could prevent it somehow, that would be great!

I ran into this bug as I was creating a contexemenu component and I attached a click handler to the body to dismiss the contexemenu, unfortunately, in Firefox, this meant that the menu was shown and then immediately hidden again as the click handler was fired on the document.

[Justineo]

It seems that click event handlers won't be triggered when you attach it to document.documentElement:

document.documentElement.addEventListener('click', e => {
  // won't trigger on right clicks
})

See this modified sandbox.

[patrickdavey]

Thanks @Justineo . I'll close this issue as, like I said above, it's not really a vue issue anyway.