title: Why mousemove event execute out of sprite's area in PIXI JS?
body: <p>I started to learn <code>pixi js</code> and here is my <a href="https://codepen.io/ChicagoJostik/pen/oNLaarQ" rel="nofollow noreferrer">codepen</a>,</p>
  <p>I have a sprite for which I want to call mousemove event,</p>
  <p>and it is working, you can see it in <code>console.log</code>, but not only for the sprite, it is also working outside of the sprite.</p>
  <p><strong>Here is my code:</strong></p>
  <pre><code>const wrapper = document.querySelector(&quot;.wrapper&quot;);
  let _w = wrapper.offsetWidth,
      _h = wrapper.offsetHeight,
      sprite;
  
  const app = new PIXI.Application({
      width: _w,
      height: _h,
          backgroundColor: 0x000000,
      autoResize: true, 
  });
  
  wrapper.appendChild(app.view);
  
  window.addEventListener('resize', resize);
  
  function resize() {
    _w = wrapper.offsetWidth,
    _h = wrapper.offsetHeight;
    
    app.renderer.resize(_w, _h);
    setup();
  }
  
  const container = new PIXI.Container();
  app.stage.addChild(container);
  
  const loader = PIXI.Loader.shared; // PixiJS exposes a premade instance for you to use.
  loader.add('bg','https://i.ibb.co/1T06dL6/bg.jpg').load(setup);
  
  function setup() {
    let texture = loader.resources.bg.texture;
    sprite = new PIXI.Sprite(texture);
    const scale = Math.max( _w / sprite.texture.width, _h / sprite.texture.height);
    sprite.scale.set(scale,scale);
    sprite.x = Math.round( ( _w - sprite.width ) / 2);
    sprite.y = Math.round( ( _h - sprite.height ) / 2);
    container.addChild(sprite);
    
    sprite.interactive = true;
    sprite.buttonMode = true;
    sprite.on('mousemove', function() {
      console.log('fire');
    })
  }
  </code></pre>
  <p>What am I doing wrong? How can I target only sprite area?</p>