P5.js: mousePressed and touchStarted broken in chrome mobile

[reijovosu]

Hello,

On the issue #1811 there is problem when counter counts double in chrome. Although the solution was a hack there is bigger underlining issue.

Chrome changed how they handle touchstart. To make scrolling faster they now ignore e.preventDefault inside touchstart event. And just tapping is firing mouse and touch events.

At the beginning I thought to prevent this happening, just delete mousePressed from touchStarted event. This will brake mobile safari instead. That fires touchstart and mousedown as a bubbled event.

So on this case I think this is more underlining issue of the framework, that I don't have authorization of fixing.

For reading:
https://developers.google.com/web/updates/2017/01/scrolling-intervention
https://github.com/WICG/interventions/issues/18

Long story short. Everybody that uses mousePressed in the mobile chrome atm - the function is fired twice.

Reijo

[jacorre]

Adding touchstarted helps alleviate the extra touch being generated. However, it doesn't seem to help with listeners attached to dom elements. For example, I have an icon that when clicked should do something. The click is triggered twice. Does this mean the p5 dom library also needs changes? Thank you!

[stalgiag]

@jacorre what kind of event listener is attached to your dom element?

I am asking because I am unable to recreate your problem.

[jacorre]

I was just questioning if the dom library also needed changes. After making the update to the newest release, things are working as expected. Thank you!

[jacorre]

Looks like it's still as issue in 0.5.11 specifically for mobile on Android device. I'm using Chrome. See my pen at https://codepen.io/anon/pen/dRaYWj. If you tap on the test button it will alert twice. The button uses the mousepressed function.

[KevinWorkman]

I'm having the same problem on Android chrome with version 0.5.11.

Adding a touchStarted() function doesn't seem to do anything for me, but this hack seems to work okay in the meantime:

var released = true;

function mouseReleased(){
    released = true;
    return false;
}

function mousePressed(){

    if(!released){
        return;
    }
    released = false;

    //rest of your code
}

[luistoledo]

I suffer the same issue. Cant make it work well on an ios & browser cordova app, that also uses a 3rd party alert library.
Already tried every combination of mouse|touch released|pressed, returning false|true.

The best is to use touchStarted and touchEnded, because they triggers a single event.

But I need mouse for some reasons; so I dig and found a workaround.

I realize that (for mousePressed) the event object is a _touchstart_ type, and the second (bounced) is a _mousedown_ type.

So I discard the event when receiving anything but a touchstart. It fixed by now, without side effects.

function mousePressed() {
    if (event.type != 'touchstart') return true
    // action
}

The mouseReleased got a _touchend_, followed by _mouseup_, or a single touched when dragged.

I guess this could be filtered directly from the dispatcher, when recognizing the input origin.. not sure, but will check.

[leokamwathi]

I opened new issue #4276 There is a bug in the touch.js file on line 145
typeof context.touchStarted === 'function'
I belive this should be.
typeof context.mousePressed=== 'function'

[nicolasbaez]

function touchEnded(event) {
    if(event.type!='mouseup'){
        //your code :)
    }
}