1

Firefox acting strangely with some event binding since version v65 on ubuntu and windows. Using Jquery "on" function to add a custom context menu. When the context menu is triggered, attaching a click event to body to close it when a left click is happened. It's working in chrome and worked in firefox till version v65. Now if I click right click, the context menu opens and closes immediately.

I analyzed the Firefox changelog a couple of times, but didn't found any change which can result in this behavior.

There is the changelog: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/65

The minimal code to reproduce the problem:

var container = $(".container")
var contextMenu = $(".contextmenu")

$(document).on("contextmenu", (function(e) {
    e.preventDefault();

    if ($(e.target).is(container)) {
        contextMenu.show();

        $(document).off("click.contextTest");
        $(document).on("click.contextTest", (function(e) {
            if(!$(e.target).is(contextMenu)) {
                contextMenu.hide();
            }
        }));
    }
}));

$(document).on("click.contextMenuItem", '.context-menu-item', (function(e)     {
  alert('button clicked');
}));

https://jsfiddle.net/Lcakpjev/1/

Example with 'mousedown': https://jsfiddle.net/Lcakpjev/2/

'mouseup' doing the same behavior like 'click'.

Right click inside the box to show the "context menu", then left click anywhere outside of the "context menu" box to hide it.

In Chrome the example works fine but in Firefox from v65 the context menu just blinks one. Older Firefox works fine as well.

Gabor
  • 33
  • 6
  • I'm on Firefox (Developer Edition) 68 and the behaviour is like what you describe should happen: clicking right shows the "context menu", clicking anywhere outside of it hides it again. Could this be an extension problem? Temporarily disable all extensions and then test again, please. – SaschaM78 Jun 17 '19 at 12:57
  • I tried to disable all the extensions, but it didn't helped. I tried this up to version 67.0.2, which is expected to be used by customers (at the time of writing). My coworkers has different setups (OS is ubuntu or windows) and everybody has the same behavior since v65. Hopefully they found the problem and fixed in version 68. – Gabor Jun 17 '19 at 13:24

1 Answers1

0

I can confirm this behavior in FF67 on macOS. But I have installed FF64, and I still can confirm it. It might be related to this 17 years old bug: https://bugzilla.mozilla.org/show_bug.cgi?id=184051 (found it via this SO question: Firefox fires click event at the same time with contextmenu event)

As a workaround, I'd use 'mousedown' instead of 'click' -- tested it, seems to work fine.

Note 1: don't forget that you set 'click' handler on every 'contextmenu' event, but never remove it -- so, number of event handlers grow with every right click inside your trigger div.

Note 2: you're using this.selector which I believe never exists.

Note 3: How to detect outside click Use jQuery to hide a DIV when the user clicks outside of it

if(!contextMenu.is(e.target) && contextMenu.has(e.target).length === 0) {
  contextMenu.hide();
}

And a fiddle with that code: https://jsfiddle.net/r4o17fjz/

alx
  • 2,314
  • 2
  • 18
  • 22
  • Note1: in my project I'm removing it, just missed from the example. Updating it. Note2: copy-paste power :D updated the example – Gabor Jun 18 '19 at 07:14
  • I have other click events for context menu elements on my page which not fired if I use 'mousedown' :( – Gabor Jun 18 '19 at 07:17
  • With your latest addition you remove it only before adding it again, but I think you should remove it inside inner `if` -- i.e. when `contextMenu` element is hidden, you unbind the handler as it is not needed anymore. Anyhow, this is unrelated to the main issue. – alx Jun 18 '19 at 07:18
  • Unless you do `e.preventDefault()` inside `mousedown`, that should not happen. Can you provide a more complete example which includes one of these other event handlers? – alx Jun 18 '19 at 07:20
  • Updated the example, a button has been added inside the context menu. Try to click it. 'mousedown' prevents the context menu to disappear immediately, but click event on button is not firing. – Gabor Jun 18 '19 at 07:59
  • That's a different problem caused by your method of detecting outside clicks. Will update my answer with correct method. – alx Jun 18 '19 at 08:10
  • It's working, but in my case it's leading into another small problems. Nothing complicated, they can be fixed with some rework. What really helped me in the end is the answer for the question which you linked (https://stackoverflow.com/a/45567273/11658362). Using "click" events instead of "mousedown" and checking for the event button "e.button === 0" (0 is left click), but checking this only if it's firefox to don't mess with other browsers. – Gabor Jun 18 '19 at 09:32