JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/GoodBoyDigital/pixi.js/dev/bin/pixi.js"></script>
<div class='canvas-wrapper'>
    <div id='canvas-holder'>
    </div>
    <a id='html-trigger' href='#'>Trigger HTML</a>    
</div>

    <div class='bug-description'>
        <p>1. Click on the red rect, this will trigger an expected event 'html triggered' 
            <br>
        2. But the yellow rect located from pixi triggers itself an event and there is no way to stop the event from outside of pixi.<br><br>

                Pixi <a href='https://github.com/GoodBoyDigital/pixi.js/blob/df0ee19d3e76c0935cfe06d5447befb2d20826bb/src/interaction/InteractionManager.js#L217' target='_blank'>registers an event listener on window at the capture phase</a>, that's the earliest possible position where mouse event can be listened to, isn't it ? So there can't be a solution in HTML to stop an event from being triggered in pixi.</p>
        
        <textarea id="log" rows="10" cols="50">Output:</textarea>
    </div>

CSS

.bug-description{
    margin-left: 310px;
}
#canvas-wrapper{
    position: relative;
}
#html-trigger,
#canvas-holder{
   position:absolute;
   left:0;
   top:0;

}

#html-trigger{
    display:block;
    left: 50px;
   width:250px;
   height:250px;
   background-color:red;
}

JavaScript

var output = document.getElementById('log');

var triggerEl = document.getElementById('html-trigger');
triggerEl.addEventListener('click', function(event){
    console.log('html triggered', event);
    output.value += '\nhtml triggered';
}, false);

var renderer = PIXI.autoDetectRenderer(300, 250);
var el = document.getElementById('canvas-holder');
el.appendChild(renderer.view);

var stage = new PIXI.Container();

var pixiRect = new PIXI.Graphics();
pixiRect.width = 250;
pixiRect.height = 250;
pixiRect.beginFill(0xffff00);
pixiRect.drawRect(0,0,250,250);
pixiRect.interactive = true;
pixiRect.mouseup = function(event){
    console.log('pixi triggered', event);
    output.value += '\npixi triggered';
}
stage.addChild(pixiRect);

requestAnimationFrame(animate);

function animate() {
	renderer.render(stage);   
  	requestAnimationFrame(animate);
}