Can onMouseDown be trusted with touch devices?

Help & Support
1 
Raycaster.prototype.onMouseDown = function (e) {
if (e.button === pc.MOUSEBUTTON_LEFT) {
    this.released = true;
}
};

It’s firing on my touch device once I click the screen, also while using desktop - left click.
so my question is, can i leave it as it is and would it work with all touch devices? Or should i add ontouchend ?

2 
Raycaster.prototype.onMouseDown = function (e) {
    if (e.button === pc.MOUSEBUTTON_LEFT) {
        this.released = true;
    }
};

Raycaster.prototype.onTouchEnd = function (e) {
    // Handle touch end event here
};

// Add event listeners for both mouse and touch events
if (this.app.touch) {
    // Touch device, add touch event listener
    this.entity.element.on('touchend', this.onTouchEnd, this);
} else {
    // Desktop, add mouse event listener
    this.entity.element.on('mousedown', this.onMouseDown, this);
}

Add touchend to prevent from any issue which occur in future, handle all the situation which occur.

3

Your script example doesn’t seem to be correct @techy_589. Also please use the script highlight option to make your script more easy to read.

1 Like
4

Thanks for this, but I’m just asking if i could entirely rely based on just onMouseDown, since the mobile devices I’ve tested all is firing, wonder whats the compability on global scope

5

You only showed the callback. Without knowing what you subscribed it to, it is hard to say. Generally, PlayCanvas just passes the browser events, so if browser doesn’t give an event, PlayCanvas won’t know about it.

6

I think now it is OK.

7

Generally, you have to use touch events for mobile devices so you don’t face any bug / issue on any other device on which you haven’t tested yet.

8

@techy_589 Your example code will be okay if you place line 11 till 18 inside the initialize function.

1 Like
9

ohhh sorry for this and for late reply, i was a little busy in some personal issues, now Alhamdulillah everything is ok.

Raycaster.prototype.onMouseDown = function (e) {
    if (e.button === pc.MOUSEBUTTON_LEFT) {
        this.released = true;
    }
};

Raycaster.prototype.onTouchEnd = function (e) {
    // Handle touch end event here
};

Raycaster.prototype.initialize = function () {
  // Add event listeners for both mouse and touch events
  if (this.app.touch) {
      // Touch device, add touch event listener
      this.entity.element.on('touchend', this.onTouchEnd, this);
  } else {
      // Desktop, add mouse event listener
      this.entity.element.on('mousedown', this.onMouseDown, this);
  }
};
1 Like