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?
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;
};
1 Correct answer
7
Replies
AdChoices