[Solved] Mouse event not fired in element component

Help & Support
1

Hi,

I made a simple UI using 2d screen and tested here:
https://plnkr.co/edit/e1yJc3?p=preview

As you can see, there is a slider with two circular buttons and if you click one of them, it is supposed to alert ‘Bingo!!!’ but the event handler not being fired (in ui-default.js). - only event handlers attached to this.app.mouse works.

Any idea?

Thank you,

2

You also need to pass useInput: true to Element components that you want to interact with.

3

Of course, I put useInput: true like this:
// top slider
var uiTopSlider = new pc.Entity(‘ui-top-slider’);
uiTopSlider.addComponent(‘element’, {
type: pc.ELEMENTTYPE_IMAGE,
useInput: true,
anchor: new pc.Vec4(0.5,1,0.5,1),
pivot: new pc.Vec2(0.5,1),
width: 64,
height: 64,
margin: new pc.Vec4(-32,-64,-32,0),
rect: new pc.Vec4(0,0,1,1),
texture: pc.app.assets.find(assetUrls[1].replace(/^.*[\/]/, ‘’)).resource
});

4

OK. I made a even simpler version:
https://plnkr.co/edit/jc3W8StWDI3Kcr1jK5TZ?p=preview

I can’t believe that this simple version also does not work. onMouseDown is never called.

Please take a look at ui-default.js:
// initialize code called once per entity
Button.prototype.initialize = function() {
this.sliding = false;
this.lastY = 0;

console.log(this.entity.element);
**this.entity.element.on(pc.EVENT_MOUSEDOWN, this.onMouseDown, this);**
this.app.mouse.on(pc.EVENT_MOUSEUP, this.onMouseUp, this);
if (this.app.touch) {
  this.entity.element.on(pc.EVENT_TOUCHSTART, this.onMouseDown1, this);
  this.app.touch.on(pc.EVENT_TOUCHMOVE, this.onTouchMove, this);
  this.app.touch.on(pc.EVENT_TOUCHEND, this.onMouseUp, this);    
}

};

Button.prototype.onMouseDown = function(event) {
alert(‘Bingo!!!’);
this.lastY = pc.app.mouse._lastY;
if (event.touches && event.touches[0]) {
this.isTouch = true;
this.lastY = event.touches[0].pageY;

5

When you create the pc.Application you are not passing any options. Try this instead:

pc.app = new pc.Application(canvas, {
  elementInput: new pc.ElementInput(canvas),
  mouse: new pc.Mouse(canvas),
  touch: !!('ontouchstart' in window) ? new pc.TouchDevice(canvas) : null,
  keyboard: new pc.Keyboard(window)
});
1 Like
6

pc.app.elementInput = new pc.ElementInput(canvas)

Yes, that’s it. Thank you so much!