Using JavaScript "pointerdown" for Button

[RyanS_Extron]

When using JavaScript in Adobe Animate, why can I use this:

this.squareMe.addEventListener("click", alertMe.bind(this));

but not this:

this.squareMe.addEventListener("pointerdown", alertMe.bind(this));

I'm able to use this:

window.addEventListener("pointerdown", alertMe.bind(this));

but this means I can't attach the addEventListener to a particular button. I need to use "pointerdown," because I am having problems when it comes to devices that especially use both mouse and touch. Thanks.

- Ryan

[kdmemory]

Hi Ryan

The pointerdown event can be sent to window, document or element objects. Outside the canvas context in the regular DOM universe one could easily operate with something like

var squareMeElement = document.getElementById("squareMe");

to attach the pointerdown event to the intended element with

squareMeElement.addEventListener("pointerdown", alertMe);

(see for this GlobalEventHandlers.onpointerdown - Web APIs | MDN )

But I'm not sure how to set up such an event structure in the HTML5 Canvas CreateJS scenario. Maybe via exportRoot?

In general I consider this a purely academic issue. "I need to use "pointerdown," because I am having problems when it comes to devices that especially use both mouse and touch." Hmm - after my experience the this.squareMe.addEventListener("click", alertMe.bind(this)); works well enough on touch devices.

Klaus

[RyanS_Extron]

Hello Klaus,

When I use "click" for touch devices, what happens is that when I touch a button, the canvas highlights blue, and sometimes the button clicks the first time, and sometimes I have to touch again to get it to click. This is OK for regular buttons, but one of them involves holding the button down while a process happens, then releasing. For this, I use "mousedown" and "pressup", but because of the canvas issues stated before, this does not work.

- Ryan

[veliborm2817778]

Hello, I have the exact same problem as you. You were not using this with a mobile but a desktop device right?

I have noticed this problem when using any chromium based browser but it works fine on older versions and non-chromium browsers.

Also I noticed that enabling 'dom.w3c_touch_events.legacy_apis.enabled' in about:config in firefox fixes this. 

Sadly my target device is not using firefox so that does not help.

So have you found a good solution for this? I've been searching and asking in multiple places and noone has been able to help.

[JoãoCésar]

Hi.

Do you have problems even using:

createjs.Touch.enable(stage);

?

https://createjs.com/docs/easeljs/classes/Touch.html

Global utility for working with multi-touch enabled devices in EaselJS. Currently supports W3C Touch API (iOS and modern Android browser) and the Pointer API (IE), including ms-prefixed events in IE10, and unprefixed in IE11.

[RyanS_Extron]

Hello,

I first used this code:

// Enable touch events while allowing the touch events to bubble up to the document.
createjs.Touch.enable( stage, false, true );

Then I couldn't apply pinch zoom when practicing on a touch device. This next code I found allows for pinch zoom:

// Don't let the stage to automatically prevent default touch events, such as pinch zoom.
stage.preventSelection = false;

Everything then worked, except that when I practiced with a touch device, each time I touched a button, it was equivalent to a double-click, which caused problems for my project. I notified Adobe, and a representative said they have replicated the issue, and discussed this with the 3rd party in charge of createjs, but that was back at the beginning of the year, and when I asked for an update, the Adobe rep says he hasn't gotten any answer back from them. That's what has been going on in a nutshell. So, I'm trying to see if there is a workaround as they still try to come up with a long-term solution.

- Ryan