Skip to main content
Inspiring
November 17, 2016
Answered

[canvas/js] click works, mouseup doesn't — anyone have any idea why?

  • November 17, 2016
  • 1 reply
  • 3042 views

So I've been busy recreating my AS3 package for JS and I hit dials. My dial is set up where click-and-hold causes it to keep spinning. Normally I would listen for mouseout and mouseup to stop it spinning, but in JS this doesn't seem to be working. Instead I have to listen for click to get it to stop.

So, this code works, but I am curious as to *why* it works when mouseup should too?

Thanks in advance,
Eric.

PS: Not including all the code, for brevity, but here's the relevant bits. Also, I'm tracking 3 different button timers because the dial speeds up if you hold it down long enough, and there seems to be no way to change the timer delay interval like there is in AS3.

   // MouseEvent Constants

    this.MOUSE_CLICK = "click";

    this.MOUSE_DOWN = "mousedown";

    this.MOUSE_UP = "mouseup";

    this.MOUSE_OUT = "mouseout";

    this.addDialListeners = function(dial) {

        console.log("Dial",dial.getName());

        dial.btnCw.addEventListener(self.MOUSE_DOWN, self.autoInc);

      //dial.btnCw.addEventListener(self.MOUSE_UP, self.stopChange); // DOES NOT WORK SO USE CLICK INSTEAD?!

        dial.btnCw.addEventListener(self.MOUSE_CLICK, self.stopChange);

        dial.btnCw.addEventListener(self.MOUSE_OUT, self.stopChange);

        dial.btnCcw.addEventListener(self.MOUSE_DOWN, self.autoDec);

      //dial.btnCcw.addEventListener(self.MOUSE_UP, self.stopChange); // DOES NOT WORK SO USE CLICK INSTEAD?!

       dial.btnCw.addEventListener(self.MOUSE_CLICK, self.stopChange);

        dial.btnCcw.addEventListener(self.MOUSE_OUT, self.stopChange);

        dial.btnCcw.addEventListener(self.MOUSE_OUT, self.stopChange);

        self.disableControlNonHotSpots(dial);

    };

    this.autoInc = function(e) {

        self.currentDialEvent = e;

        self.dialUp(e);

        self.btnDownRepeat1 = setInterval(self.doBtnDownRepeats, self.delaySpeed1);

        console.log("AUTINC", self.btnDownRepeat1);

    };

    this.autoDec = function(e) {

        self.currentDialEvent = e;

        self.dialDn(e);

        self.btnDownRepeat1 = setInterval(self.doBtnDownRepeats, self.delaySpeed1);

        console.log("AUTODEC", self.btnDownRepeat1);

    };

    // Stop the timer on MOUSE_UP or MOUSE_OUT.

    this.stopChange = function(e) {

        console.log("STOP THE DIAL", self.btnDownRepeat, e.type);

        clearInterval(self.btnDownRepeat1);

        clearInterval(self.btnDownRepeat2);

        clearInterval(self.btnDownRepeat3);

        self.btnDownRepeat1 = -1; // Timer event tracker 1

        self.btnDownRepeat2 = -1; // Timer event tracker 2

        self.btnDownRepeat3 = -1; // Timer event tracker 3

        self.currentRepeatCount = 0;

    };

This topic has been closed for replies.
Correct answer kglad

i don't think there is a mouseup.  try pressup.

1 reply

kglad
Community Expert
kgladCommunity ExpertCorrect answer
Community Expert
November 17, 2016

i don't think there is a mouseup.  try pressup.

Inspiring
November 17, 2016

I think you're right. Just tested and it works now. Which KILLS ME!

Because my source for event names was the freaking Mozilla guide. They call out mouseup and have absolutely zero mention of pressup, lol. :-/

Event reference | MDN

At any rate, thanks for clearing that up, man!

kglad
Community Expert
Community Expert
November 17, 2016

you're welcome.

canvas uses easeljs, EaselJS v0.8.2 API Documentation : EaselJS

you can also use vanilla javascript, but then you run into all the usual problems with javascript: different browser/versions interpret it differently.  using a library like jquery helps remove a lot of the browser-to-browser variability.