Highlighted

Using JavaScript "pointerdown" for Button

Explorer ,
Apr 16, 2019

Copy link to clipboard

Copied

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

Views

288

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Using JavaScript "pointerdown" for Button

Explorer ,
Apr 16, 2019

Copy link to clipboard

Copied

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

Views

289

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 16, 2019 0
Advocate ,
Apr 17, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 17, 2019 0
Explorer ,
Apr 17, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 17, 2019 0
Community Beginner ,
Sep 15, 2020

Copy link to clipboard

Copied

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.

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 15, 2020 0
Adobe Community Professional ,
Apr 17, 2019

Copy link to clipboard

Copied

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.
__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 17, 2019 1
Explorer ,
Apr 17, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 17, 2019 0