Right mousebutton click

[dy]

Hi. I can’t catch, how to detect if right mouse button was clicked?
Or how to detect double-click?

[GoodBoyDigital]

No support just yet, will need to add that to the interaction manager 👍

[englercj]

Honestly I think the best way to do this would be to pass along event information for mouse events. Then you can do it properly on mousedown by checking event.which for which mouse button. As for double-click, that is just 2 click events happening quickly. You can track them and do a double click action if the time between is short enough.

Something like:

var lastClick = 0,
    space = 350;

sprite.click = function(data) {
    var now = Date.now(),
        diff = now - lastClick;

    event = data.originalEvent;

    if(event.which === 3 || event.button === 2) {
        //this was a right click;
    } else if(lastClick && (diff < space)) {
        lastClick = 0; //reset time

        //this was a double click
    } else {
        lastClick = now; //update last click time

        //this was a regular click
    }

};

I'll see if I can't get something going this weekend on this.

[englercj]

Please nte that the code example I changed slightly, decided to put the original event in the InteractionData object.

[JotFX]

The original event does not work for me in Chrome (Version 32.0.1700.102 m). The "button" and "which" parameters are always 0. When I attach a simple listener like this it works:

$("canvas")[0].onmousedown = function(e){ if (e.button == 2) console.log("right"); };

[englercj]

@misters Do you have a live example, or simple code example I can look at? Thanks!

[JotFX]

I will see if I can work out an example tomorrow.
Just to give you some more info: I'm using typescript and I am extending "PIXI.TileableSprite". I attach listeners to all available events (like in the interactive example on the pixi page). The right click gets fired, but just the button parameter is not correct.
Are you fine with some typescript?

[englercj]

@misters That should be fine, thanks for the extra info. That is a really strange one!

[owenconti]

Has there been any solution to the e.which, e.button always being 0? They are still always 0 for me as well. Also, the "type" is also mousemove, even when I right click.

[englercj]

I'm not able to reproduce this, so I will need to see some code like I mentioned before. Using the following it works fine:

// bind native event on the canvas
document.querySelector('body > canvas').addEventListener('mousedown', function(e) { console.log('native', e.button, e); }, false);

// bind a mousedown to the stage
stage.mousedown = function(e) { console.log('stage', e.originalEvent.button, e.originalEvent); };

The output I get from a left-click is:

stage 0 MouseEvent {dataTransfer: null, toElement: canvas, fromElement: null, y: 321, x: 833…}
native 0 MouseEvent {dataTransfer: null, toElement: canvas, fromElement: null, y: 321, x: 833…}

And from a right-click is:

stage 2 MouseEvent {dataTransfer: null, toElement: canvas, fromElement: null, y: 321, x: 833…}
native 2 MouseEvent {dataTransfer: null, toElement: canvas, fromElement: null, y: 321, x: 833…}

[ghost]

Is there any reason why this is not in the main PIXI? (the right click differentiation)

I ask because I was planning to add it, and maybe there were complications that I couldn't see and maybe end up losing a lot of time.

Thanks

[englercj]

It is supported by the native browser what are we going to do to make it easier than what the native browser provides?

[ghost]

I meant, right and left click over an image.

For what I know, the browser identifies clicks over the canvas only. That is why PIXI does a collision test with every interactive image. This:

for (var i = 0; i < length; i++) {
    var item = this.interactiveItems[i];

    if (item.mousedown || item.click) {
        item.__mouseIsDown = true;
        item.__hit = this.hitTest(item, this.mouse);

        if (item.__hit) {
            //call the function!
            if (item.mousedown)item.mousedown(this.mouse);
            item.__isDown = true;

            // just the one!
            if (!item.interactiveChildren)break;
        }
    }
}

There is no button distinction, so all collisions will be checked even if that is not the button you wanted to listen to.

My idea was doing something like this:

var event = this.mouse.originalEvent;
var isRightButton = event.button === 2 || event.which === 3;

And then testing for different buttons in a similar way to the original code.

    if ( !isRightButton && (item.mousedown || item.click) ) {
        //Code for the left click, same code as the original
    } 
    else if ( isRightButton && (item.rightdown || item.rightclick) ) {
        //Right click code
        item.__IsRightDown = true;
        item.__hit = this.hitTest(item, this.mouse);

        if (item.__hit) {
            //call the function!
            if (item.rightdown)item.rightdown(this.mouse);
            item.__isRightDown = true;

            // just the one!
            if (!item.interactiveChildren)break;
        }
    }

The benefits of this are:

Clearer and cleaner code for the user. Having a function for each click and not needing extra logic.
Faster execution when game is heavy based on left or right clicks with lots of interactive elements.

[tleunen]

+1
Having a different callback for left/right click would be really nice!

[englercj]

So it is for the purpose of optimization. I could see that, feel free to throw in a PR.

[ghost]

Thanks!

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.