Hoylemd

How do do right click on a Container

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?

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites
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(); });

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

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...

  • Recently Browsing   0 members

    No registered users viewing this page.