Jump to content

Pixi overlay div to catch events using interaction plugin


Recommended Posts

Hi everyone,

the interaction in Pixi confuses me. I have the following simple structure:

<canvas id='pixi-container'></canvas>
<div id='event-catcher'></div>

Both the canvas and the event-catcher have the same width/height and are positionned on top of each other: event-catcher on top of pixi-container.

I then use the setTargetElement to tell pixi that I want event-catcher to catch the events.


However in my stage I have some sprites and DisplayObjectContainers that have onclick events that are not being fired. If I remove the event-catcher div it will work properly and click events are fired.

Do I misunderstand the use of setTargetElement in Pixi?


Thank you for any help.

Link to comment
Share on other sites


sorry I did not see your reply. I am using pixi 4.1.0.

I found what the problem was in this function:

 InteractionManager.prototype.mapPositionToPoint = function mapPositionToPoint(point, x, y) {
        var rect = void 0;

        // IE 11 fix
        if (!this.interactionDOMElement.parentElement) {
            rect = { x: 0, y: 0, width: 0, height: 0 };
        } else {
            rect = this.interactionDOMElement.getBoundingClientRect();

        point.x = (x - rect.left) * (this.interactionDOMElement.width / rect.width) / this.resolution;
        point.y = (y - rect.top) * (this.interactionDOMElement.height / rect.height) / this.resolution;

the width and height of the interactionDOMElement are undefined, unless it is a canvas (and maybe some other elements such as images, I am not sure).
I have replaced width and height by clientWidth and clientHeight and it works (at least the mousedown is at the good place and my sprite is being selected). Another solution is to set the width and height attributes of the DOMelement before setting the target and it works too.

 point.x = (x - rect.left) * (this.interactionDOMElement.clientWidth / rect.width) / this.resolution;
 point.y = (y - rect.top) * (this.interactionDOMElement.clientHeight / rect.height) / this.resolution;


var eventCatcher = document.getElementById('event-catcher');
eventCatcher.width = XXX; eventCatcher.height = YYY;

I don't know if it is a bug or not given the differences between clientWidth and width (no difference in my case for my DOMelement), so let me know what you think.

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

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.


  • Recently Browsing   0 members

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