Jump to content

How do do right click on a Container


Hoylemd
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...

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.

 

Link to comment
Share on other sites

  • 3 months later...
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(); });

Link to comment
Share on other sites

  • 2 weeks later...
  • 1 year later...

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;
	}

 

Link to comment
Share on other sites

  • 2 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...