[SOLVED] Touchevents (swipe detection) firing multiple times

Help & Support
#1

Hello PC users!

I recently wanted to implement touch navigation into my app, a simple one that is.
I don’t think it is necessary to state my project, all touch is handled in one file.

Problem: When swiping, on touchend that is, both events are triggered 2 more times, makes three in total and not much sense…

Here’s the code:

 initialize: function () {
            this.touchIn={};
            this.touchOut={};
            if (app.touch) { // only attach if the browser is touch-capable
                app.touch.on("touchstart", this.onTouchStart, this); //one function on touch...
                app.touch.on("touchend", this.onTouchEnd, this);  //one on leaving
            }

onTouchStart: function (e) { 
            //Save Coordinates to Object.
            this.touchIn=e.changedTouches[0];
            console.log(e.changedTouches[0]);
            },
onTouchEnd: function(e){
            //Save Coordinates to Object.
            this.touchOut=e.changedTouches[0];
            console.log(e.changedTouches[0]);
           


 //--Then I start working with touchIn and touchOut.--

As mentioned, I get 6 consoleLogs in total, first onTouchStart gets called thrice, then onTouchEnd. Does somebody have an idea, why?

I appreciate every hint and help!!

Greg

#2

Can you break point the app.touch.on line and see if you are adding the event listener 3 times?

Possibly you have 3 copies of this script active?

#3

No, already checked that. And calls to these specific functions aren’t made in any other script.

YES! That seems to be it! The initialize function is run through three times. But… Why would it?

#4

I don’t know? What code is calling initialize? Can you link to the project?

#5

Yup, here it is.
https://playcanvas.com/editor/scene/421469
I made some changes though, the whole touchcontrol is in Game_NoEnt.js now. It only adds one eventlistener per start and end now, so Yay, but I lost focus, so the callbacks don’t work atm. Needs more fiddeling, I guess…

#6

A way too long fiddling period has ended. I just added a test wether the event already exists (–>app.touch.hasEvent(“touchstart”)) to the beginning of my initialize method. That keeps PC from going over it several times.

if (app.touch&&app.touch.hasEvent("touchstart")===false) { // app.touch is a pc.TouchDevice object, it only exists if the browser is touch-capable
                console.log("Has touch");
                app.touch.on("touchstart", this.onTouchStart, this);
                console.log("start added");
                app.touch.on("touchend", this.onTouchEnd, this);
                console.log("end added");
            }

See you around!

#7

Initialise method on script is called for each entity initialize phase that script is attached to. Scripts - are instances, not singletons.
If you need specific script to be executed only once, then you have to add only to one entity in your scene, no more.

So you have three entities: buegeleisen1, each of them have own script instance of touch, so each of them will be executed independently.

1 Like
#8

I knew that, and thinking I had added the script to only one entity, I was like pfft. Then I went to check, and now I’m sooo embarrassed! I definitely didn’t append that to THREE irons.

But thank you so much, Max!

#9

So posting link to a project - is always good idea, even if you thought initially it wont be necessary :slight_smile: