swisnl/jQuery-contextMenu

bug?: defining left click as trigger type triggers "oncontextmenu" of trigger button

arashdalir opened this issue · 1 comments

I have encountered an unexpected side-effect of the left-click handling in the code: we have a trigger button inside a slick-grid table structure, our slick-grid cells have a handler for onContextMenu and we are now facing a major issue with the trigger button! it's calling the slick-grid handler instead of calling the contextMenu creator.

following GIF shows the issue. the yellow clicks are left-click, the red ones are right-click...

contextMenu-leftClick

reason for it is the code below. clicking the trigger button is calling the contextMenu event, which in return triggers the onContextMenu function defined later on in our slick-grid section.

any suggestions how to avoid this?

  • one solution is to detect that the onContextMenu was triggered artificially in the slick-grid code and not to continue that function. this would require that the code knows that the trigger (event target) is a contextMenu object. I have not been able to find any plugin command or helper which would facilitate this.
  • another and well, a better solution is to rewrite the code below to avoid calling contextMenu event! technically, it should be possible to define 2 different sets of actions for left-clicking or right-clicking an element and this piece of code is forbidding it...
//jquery.contextMenu.js:351 - v2.9.2
// contextMenu left-click trigger
click: function (e) {
  e.preventDefault();
  e.stopImmediatePropagation();
  $(this).trigger($.Event('contextmenu', {data: e.data, pageX: e.pageX, pageY: e.pageY}));
},

PS: I used $.contextMenu.menus to check if the event target is one of the contextMenu selectors, partially implementing my first solution, but now there is another issue. I cannot determine in my slick-grid code if I have right-clicked or left-clicked on the button (code posted below).

gGrid.on(
	"ContextMenu",
	function (e, args){
		var $t = $(e.target);

		var isContextMenu = false;

		$.each($.contextMenu.menus, function(ns, o){
			if ($t.is(o.selector))
			{
				isContextMenu = true;
			}
		});

		if (isContextMenu)
		{
			return;
		}
...

as I have seen in the code, there are 4 code parts which actually trigger the contextmenu: handlers for click, mouseup, mouseenter and on line 1621 which I honestly don't understand.

I suppose if the "original" event was passed as an argument of the new event, it would have been possible to determine in my slick-grid side of the code what the real called event used as trigger (left, mouseenter, mouseup etc.). something like $.Event('contextmenu', {data: e.data, pageX: e.pageX, pageY: e.pageY, originalEvent: e})