Using 'touchstart' and 'end' on "HTML+CSS/UI"-example

Help & Support
1

In order to keep highest SVG-standard upon my buttons, I want to use the “HTML+CSS/UI”-example frame (https://developer.playcanvas.com/en/tutorials/htmlcss-ui/), and not the 2DScreen-published-export touch-button setup (https://developer.playcanvas.com/en/tutorials/basic-touch-input/)

Project:
https://playcanvas.com/editor/scene/1167085 … and as published: https://playcanv.as/b/OYMaPP5d/

As one can see I cannot do by ‘click’ alone if mobile-screen resolution is <1800 combined px:
The following reacts to mouse/workstation above 1800 px, but not below with ‘touch’.


Ui.prototype.bindEvents = function() {
    var self = this;
    // example
    //
    // get button element by class
    var button = this.div.querySelector('.button');
    var counter = this.div.querySelector('.counter');
    // if found
self.scrResToMobOrNotDeterm = window.innerHeight + window.innerWidth;
if(self.scrResToMobOrNotDeterm>1800){
    if (button) {
        // add event listener on `click`
        button.addEventListener('click', function() {
            ++self.counter;
            if (counter)
                counter.textContent = self.counter;
            
            console.log('button clicked'); self.app.root.findByName("Text").element.text = "Mouse";  

            // try to find object and change its material diffuse color
            // just for fun purposes
            var obj = pc.app.root.findByName('chamferbox');
            if (obj && obj.model && obj.model.model) {
                var material = obj.model.model.meshInstances[0].material;
                if (material) {
                    material.diffuse.set(Math.random(), Math.random(), Math.random());
                    material.update();
                }
            }
        }, false);
        
     }else{  

     if (button) {        
/// trying by standard js-DOM event list (https://www.w3schools.com/jsref/dom_obj_event.asp):    
           button.addEventListener('ontouchStart',   function(){          
 self.app.root.findByName("Text").element.text = "TchSt";          }, false);      
           button.addEventListener('ontouchend',   function(){          self.app.root.findByName("Text").element.text = "TchEd";          }, false);
/// trying by pc.EVENT:           
if(self.app.touch) {        self.app.touch.on(pc.EVENT_TOUCHSTART, self.onTouchStart, self);  
                               self.app.touch.on(pc.EVENT_TOUCHEND,self.onTouchEnd, self);    }
         }
        }
     }

    if (counter)
        counter.textContent = self.counter;
};

Ui.prototype.onTouchStart= function (){  this.app.root.findByName("Text").element.text = "OTS";  };
Ui.prototype.onTouchEnd= function (){  this.app.root.findByName("Text").element.text = "OTE";  };

What to do in order to merge the two example-approaches? (so yes, they both work independently, but the cross-platform event-compromise of ‘click’ seems insufficient when it comes to holding/keeping the finger down on a mobile screen)

2

How is policy? I did find another solution that helped my project, but not this issue - so considering writing it as SOLVED (as in I do not need urgent help) … as I still have troubles in regards of issue, I will let it be unsolved (?)

3

If the solution or the workaround is not posted, then the thread is not solved.

4

Ok, thanks

5

Had a quick look at this and your best bet here (IMO) is to handle both touch and mouse events instead of looking to do one thing for mobile and another for desktop.

https://playcanvas.com/project/799994/overview/htmlcss_touchstartandend

In this case, I used preventDefault on the touch events to stop the click logic

Ui.prototype.bindEvents = function () {
    var self = this;
    // example
    //
    // get button element by class
    var button = this.div.querySelector('.button');
    var counter = this.div.querySelector('.counter');
    if (button) {
        // add event listener on `click`
        button.addEventListener('click', function () {
            ++self.counter;
            if (counter)
                counter.textContent = self.counter;

            console.log('button clicked');
            self.app.root.findByName("Text").element.text = "Mouse";

            // try to find object and change its material diffuse color
            // just for fun purposes
            var obj = pc.app.root.findByName('chamferbox');
            if (obj && obj.model && obj.model.model) {
                var material = obj.model.model.meshInstances[0].material;
                if (material) {
                    material.diffuse.set(Math.random(), Math.random(), Math.random());
                    material.update();
                }
            }
        }, false);

        if (button) {
            button.addEventListener('touchstart', function (event) {
                self.app.root.findByName("Text").element.text = "TchSt";
                event.preventDefault();
            }, false);
            button.addEventListener('touchend', function () {
                self.app.root.findByName("Text").element.text = "TchEd";
            }, false);
            if (self.app.touch) {
                self.app.touch.on(pc.EVENT_TOUCHSTART, self.onTouchStart, self);
                self.app.touch.on(pc.EVENT_TOUCHEND, self.onTouchEnd, self);
            }
        }
    }

    if (counter)
        counter.textContent = self.counter;
};