How do do right click on a Container

[Hoylemd]

Hey folks, first post etc.

I'm trying to make a minesweeper clone, and I want to be able to right click on a tile sprite to 'flag' it, but I can't figure out how to make a right click trigger an actual click event instead of opening the context menu.  I tried adding a custom `contextmenu` handler to the canvas itself to prevent the context menu from opening, but that stiff didn't trigger a click event, as https://github.com/pixijs/pixi.js/issues/36 makes me think it should.  The handler I used was this:

 

function contextmenu_handler(event) {
    console.log('right click!');
    return false;
}

very simple, and that did intercept the right click (no context menu opened), but as I said, no mouseup or mousedown event on the Container object.

I tried googling a bit to find a solution, but I couldn't find anything relevant, aside from the issue I linked earlier.  Is this just not something I can do with pixi (or in a web-based game)? Or am I missing something?

[mattstyles]

I'm not 100% but I'm pretty sure the right click isn't really a supported action on a web page (this has nothing to do with Pixi or any other library, this is browser implementation). Using the 'contextmenu' event is nothing more than a hack so I'd be surprised if you could handle complex actions associated with a right click as you can for a left click (I'm assuming this is the same for a middle click, although googling should shed some light).

Right click has an associated action when using a web browser and you should also ask yourself whether you really want to override system controls. I'd probably say that for your use case its probably ok, but as a general rule of thumb you shouldn't ordinarily go around mucking with standard platform behaviours.

[Hachi]

I can not promise you it works 100% as my system hasn't been battle-tested ny outsiders so far. But I haven't found issues with it so far (in multi browser tests). So... I use these: https://github.com/Hachitus/FlaTWorld/blob/master/src/core/utils/mouse.js#L14

/**
 * Detects if the mouse click has been the right mouse button
 *
 * @method isRightClick
 * @param {Event} e   The event where the click occured
 */
function isRightClick(e) {
  return e.which === 3;
}
/**
 * Disabled the right click (or something else in mobile) context menu from appearing
 */
function disableContextMenu(canvas) {
  canvas.addEventListener('contextmenu', (e) => {
    e.preventDefault();
  });
}

So just disable context menu and check is the actual click a right click, left, click, middle click or something else. I found the context menu "hack" not working correctly in the end.

 

[caymanbruce]

On 10/3/2016 at 3:09 AM, Hachi said:

I can not promise you it works 100% as my system hasn't been battle-tested ny outsiders so far. But I haven't found issues with it so far (in multi browser tests). So... I use these: https://github.com/Hachitus/FlaTWorld/blob/master/src/components/map/core/utils/utils.js

/**
 * Detects if the mouse click has been the right mouse button
 *
 * @method isRightClick
 * @param {Event} e   The event where the click occured
 */
function isRightClick(e) {
  return e.which === 3;
}
/**
 * Disabled the right click (or something else in mobile) context menu from appearing
 */
function disableContextMenu(canvas) {
  canvas.addEventListener('contextmenu', (e) => {
    e.preventDefault();
  });
}

So just disable context menu and check is the actual click a right click, left, click, middle click or something else. I found the context menu "hack" not working correctly in the end.

 

Your link is broken. But yes I can confirm this works. just add canvas.addEventListener('contextmenu', (e) => { e.preventDefault(); });

[Hachi]

On 1/6/2017 at 4:58 AM, caymanbruce said:

Your link is broken. But yes I can confirm this works. just add canvas.addEventListener('contextmenu', (e) => { e.preventDefault(); });

Thanks for notifying. I changed the link to correct one: https://github.com/Hachitus/FlaTWorld/blob/master/src/core/utils/mouse.js#L14

[Fedor]

I have a simpler solution. In the event handler that cancels the contextmenu event on the canvas, I also set a variable window.wasRightClick

	this.graphics.view.addEventListener('contextmenu', (e) => {
		window.wasRightClick=true;
        e.preventDefault();
  	});

In the handler fired on mouse down on a sprite or other object, I can now test for it. At the end of this event I reset the variable to false. 

	this.click = function(event) {
	
		event.stopPropagation();
		if (window.wasRightClick) 
			acGame.showInventory(this.acParent);
		else
			acGame.showCommands(this.acParent);
		
		window.wasRightClick=false;	
		return false;
	}

 

[Fedor]

I found a simpler solution: check event.data.originalEvent.button - if it is 2, it was a right click. 0 is a left click. 

You still need to prevent the context menu to show up.