dbreaux dbreaux - 4 months ago 22
Javascript Question

prototype.onClick firing 3 times on double-click

I've inherited some JavaScript code that implements a soft keyboard with a custom

Keyboard
class with several
prototype
methods - both custom methods and methods that seem to be overrides of some defaults. (First confession is that I'm not very experienced with JavaScript, and have only skimmed a few references to the
prototype
approach.)

The
prototype
methods are defined like this, and this is the specific method not doing what I expect:

Keyboard.prototype.onClick = function(keyImageElement) {
keyImageElement = window.event.srcElement;
var keyboard = keyImageElement.keyboard;

// Make sure that the srcElement is a key image element
if (keyboard !== undefined) {
if (!keyImageElement.disabled)
{
Keyboard.setOpacity(keyImageElement, .70);
var resetFilter = function() {
Keyboard.setOpacity(keyImageElement, 1);
};
setTimeout(resetFilter, 200);

keyboard.updateInputField(keyImageElement.name);
}
}
};


(Yes, I know this is using IE-specific mechanisms; it's for an IE-based embedded browser. However, I've also duplicated the same behavior passing
e
and using
e.target
in Firefox.)

Keyboard creates a DOM
div
, and appends to it a DOM
span
element for each key, of which there are a couple dozen.

In IE 7 and 8 modes, this works correctly. No matter how fast I click, I only get one event per click. But in IE >=9, and in Firefox 48, if I click twice, fast enough (presumably to register as a double-click, but it doesn't actually have to be super fast), I get 3 events, not 2.

I've tried the
event
stopPropagation()
,
preventDefault()
, and
stopImmediatePropagation()
methods, but those haven't changed the behavior.

I'm guessing some underlying browser/JavaScript/standards changes are responsible for this different behavior, but I don't know what specifically, or how to address it.

Among other things, I don't seem to be able to similarly override some other
onXxx()
event methods. In fact, the original code has
Keyboard.prototype.onMouseDown()
and
onMouseUp()
methods, for instance, but it turns out those are not being triggered at all, even in the older IE modes.

Edit: Since it's clear that even double-clicks call
onClick()
, I've tried using the
detail
element to determine which case this is, and ignore the "extra" call for the double-click, but it turns out:


  1. Firefox sees a count of 1, 2, 2. I was expecting and counting on 1, 1, 2

  2. IE doesn't seem to support this at all, seeing 0, 0, 0


Answer

Ok, I've addressed my immediate issue. I can check the type field for 'click' vs. 'dblclick'.

(Still would love to see a good reference on using prototype methods to override event handling.)