question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Right click on a container, sprite or graphics, does not fire any events.

See original GitHub issue

If I define an event handler for a Pixi element (DisplayObject: container, sprite, graphics), and on the ‘mousedown’ event (or some of the other events), the handler get’s fired when clicking with the left click of the mouse, and it gets fired when clicking with the middle click of the mouse, but when clicking with the right click nothing happens, and the browser context-menu comes up that says save image as, copy image, etc, etc.

So basically there is no right-click in a PIXI App, is there?

I read from here that by doing this:

document.querySelector('body > canvas').addEventListener('mousedown', function(e) { console.log('native', e.button, e); }, false);
stage.mousedown = function(e) { console.log('stage', e.originalEvent.button, e.originalEvent); };

You should get the following result:

// left-click:
stage 0 MouseEvent
native 0 MouseEvent

// right-click:
stage 2 MouseEvent
native 2 MouseEvent

But I get this:

// left-click:
stage 0 MouseEvent
native 0 MouseEvent
// right-click:
native 2 MouseEvent

anyways the following does not work either:

var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, {backgroundColor : 0x1099bb});
document.body.appendChild(renderer.view);
var stage = new PIXI.Container();
stage.interactive = true;
stage.hitArea = new PIXI.Rectangle( 0, 0, 100000, 100000 );
stage
	.on('mousedown', down)
	.on('touchstart', down)
	.on('mouseup', up)
	.on('mouseupoutside', up)
	.on('touchend', up)
	.on('touchendoutside', up);
animate();
function animate() {
    requestAnimationFrame(animate);
    renderer.render(stage);
}
function down(e) { console.log(e); }
function up() { console.log(e); }

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:14 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
like2dcommented, Mar 23, 2017

@themoonrat @andrewstart Works like a charm when using just pointerevents + switching manually.

Thanks guys!

1reaction
andrewstartcommented, Feb 5, 2017

The way the system is designed is that mousedown, mouseup, mouseupoutside, and click are all for left clicks, and that rightdown, rightup, rightupoutside, and rightclick are all for right clicks.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Right click on a container, sprite or graphics, does not fire any ...
If I define an event handler for a Pixi element (DisplayObject: container, sprite, graphics), and on the 'mousedown' event (or some of the ......
Read more >
How do do right click on a Container - Pixi.js
Hey folks, first post etc. I'm trying to make a minesweeper clone, and I want to be able to right click on a...
Read more >
Why is pointerdown event delivered to a wrong PIXI.Container ...
I have a feeling that the root cause for this is that the Tile objects are scaled up when clicked and thus Pixi.js...
Read more >
Interaction - PixiJS
Interaction is Events ... To respond to clicks and taps, bind to the events fired on the object, like so: let sprite =...
Read more >
PIXI.Container - PixiJS API Documentation
It is the base class of all display objects that act as a container for other objects, including Graphics and Sprite.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found