Skip to content

ElementComponent 'mousemove' event fires outside element when LMB is pressed  #4755

Open
@mgawinKatana

Description

@mgawinKatana

Description

Event 'mousemove' is invoked on ElementComponent, with useInput set to true, when mouse is outside the element but previously LMB was pressed inside this element. Works correctly on engine version 1.55.0.

const TestMouse = pc.createScript('testMouse');
TestMouse.attributes.add('status', { type: 'entity' });
TestMouse.attributes.add('target', { type: 'entity' });

TestMouse.prototype.initialize = function() {
    this.isOver = false;
    this.targetElement = this.target?.element;
    if (!this.targetElement) return;

    this.targetElement.on('mouseenter', this.onEnter, this);
    this.targetElement.on('mouseleave', this.onLeave, this);
    this.targetElement.on('mousemove', this.onMove, this);
};
TestMouse.prototype.update = function() {
    this.status.element.text = 'Over UI: ' + this.isOver;
};
TestMouse.prototype.onEnter = function() {
    this.isOver = true;
};
TestMouse.prototype.onLeave = function() {
    this.isOver = false;
};
TestMouse.prototype.onMove = function() {
    this.isOver = true;
};

Steps to Reproduce

  1. Go to: https://launch.playcanvas.com/1563175?debug=true
  2. Press and hold LMB inside white rectangle and move mouse outside the rectangle
  3. Text on top will still show that mouse is inside ui
  4. Now go to: https://launch.playcanvas.com/1563175?debug=true&version=1.55.0 <- notice older version
  5. Repeat step 2
  6. Now event will work correctly, text on top will change to false

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions