Mousedown in html5 canvas only works once?

[Deems258473099exd]

Hi everyone! I'm very new to coding and JS but I'm trying, I'm trying like mofo to understand this beautiful madness!

My newest pain is attempting to make the "mousdown" event to move my MC constantly intead of just once. This is what I got-

this.button.addEventListener("mousedown", fl_MouseDownHandler_23.bind(this));

function fl_MouseDownHandler_23() {

this.ball.y += 15;

}

I'm trying to have it so that when I hold the mouse down on my button, it will keep moving the ball object on the y axis continuesly. Right now it does it just once. I've tried like a madman to figure this out but, no luck. Can anyone help with this please? Many bows on gratitude and respect in advance!

[kglad]

check the developer console to see if tou gave an error.

[Deems258473099exd]

It gave me this issue. And though I'm not really sure what it's really about, I assume it something to do with running the file on my machine instead of a real server? I could be wrong of course. Have you accountered this before?

createjs.min.js:13 Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently
b._testHit @ createjs.min.js:13

[kglad]

that's not an error.

use console.log() to confirm your mousedown's are being registered in that listener function.  ie, your button may not exist (even though it appears to be on stage).

[Deems258473099exd]

The colsole clocks the mousedowns no problems there. 

By default every event listener is runnning endlessly right? Like it's always listening? 

[Deems258473099exd]

So, I'm pretty sure if you use this code in your Animate, you'll get the exact results, I doubt there is something diffrent about mine. I found this video about JS button being held and in the begenning the dude said, this function is not native to JS sooo, this could be the answer. Like one of thise things you imagine should be super simple and then turns out it's not. https://youtu.be/A95mIE2HdcY

[ClayUUID]

Are you saying it only works once EVER, or it only works once per mouse press?

[Deems258473099exd]

Once per mouse press. And the funny thing is, it works exactly as I want it with "keypress" - if I'm holding a specified key the Y axis movement keeps going. But does not do this with holding down the mouse.

[ClayUUID]

Nothing funny at all. Keys auto-repeat when held down. Mouse buttons do not.

[JoãoCésar · Accepted solution]

Hi.

The mousedown event will only fire once. If you want a continuous action, you need to assoaciate the mousedown event to a tick event. Like this:

var root = this;
var button = root.button;
var ball = root.ball;

function onMouseDown(e)
{
	e.currentTarget.pressed = true; // pressed is a custom property
}

function onPressUp(e)
{
	e.currentTarget.pressed = false;
}

function onTick()
{
	if (button.pressed)
		ball.y += 15;
}

button.on("mousedown", onMouseDown);
button.on("pressup", onPressUp);
createjs.Ticker.on("tick", onTick);

Regards,

JC

[Deems258473099exd]

Yep, this is it! Thank you so much JC, you have saved the day!

Like the noob that I am, I would have never imagined that such a simple concept would require this much code. Valueble lesson learned for sure! Thank you again, I really appreciate your help!

[JoãoCésar]

You're welcome!