Skip to main content
D
Deems258473099exd
Participating Frequently
June 13, 2023
Answered

Mousedown in html5 canvas only works once?

  • June 13, 2023
  • 3 replies
  • 1761 views

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!

    This topic has been closed for replies.
    Correct answer JoãoCésar17023019

    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

    3 replies

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community ExpertCorrect answer
    Community Expert
    June 14, 2023

    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

    D
    Deems258473099exdAuthor
    Participating Frequently
    June 14, 2023

    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ésar17023019
      Community Expert
      JoãoCésar17023019Community Expert
      Community Expert
      June 14, 2023

      You're welcome!

      C
      ClayUUID
      Legend
      June 13, 2023

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

      D
      Deems258473099exdAuthor
      Participating Frequently
      June 14, 2023

      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.

      C
      ClayUUID
      Legend
      June 14, 2023

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

      kglad
      Community Expert
      kgladCommunity Expert
      Community Expert
      June 13, 2023

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

      D
      Deems258473099exdAuthor
      Participating Frequently
      June 13, 2023

      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
      Community Expert
      kgladCommunity Expert
      Community Expert
      June 13, 2023

      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).

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices