Option to propagate mousedown event when Context Menu is shown

[nicholassinggih]

Hi Bjorn & others,

This web app I'm currently developing highlights an element on mousedown (both left and right button). If right button is down, the element under cursor will be highlighted and context menu is shown.

Problem is, once the context menu is shown, the $layer element blocks all mousedown event listeners. So, once the user right clicks on one element, when they right click on another, only the context menu is shown but the highlighting does not happen because the mousedown event isn't propagated to the proper element.

Is there a way to work around this? I've tried testing by customising the layerClick and contextmenu event handlers by commenting out the stopImmediatePropagation calls. But it didn't work, because mousedown isn't caught if the element is beneath another element.

This was tested in Chrome. Not sure about other browsers, but right now I'm focusing on Chrome and IE because my users only either use one of them.

Thanks in advance,

[dbarrett84]

Having a similar issue... i have added the context menu on elements within an editor.
When i right click it shows the correct context menu, but the selected element is not updated because the right click has stopped propagation and therefore my options in the menu are being applied to the wrong element.

[bbrala]

Yeah the whole overlay is kind of a problem. I've been thinking about a way to move away from using a overlay for detecting clicks outside the menu, or perhaps we can do something with document.elementFromPoint to simulate a click on the element which would be clicked, although i feel this might be kinda flakey and not work as well as you might hope...

[brianhjelle]

I had a very similar use case to nicholassinggih. I was able to workaround this issue by manually showing and hiding the context menu.
https://swisnl.github.io/jQuery-contextMenu/docs/plugin-commands.html#manually-show-a-contextmenu
You'll need to set the trigger option to false first though.

[bbrala]

Hmm, so this doesn't do anything for you?

jQuery-contextMenu/src/jquery.contextMenu.js

Line 471 in e94897e

if (document.elementFromPoint && root.$layer) {

[brianhjelle]

I tried using the master codebase which I think contains the change you mentioned. It did not work for my particular use case. I'm using threejs and HTML canvas. But manually, showing and hiding the context menu did the trick.

Thanks for maintaining this library. It's very nice.

[bbrala]

Glad you found a workaround :) And thanks for the compliment.