prototype.onClick 双击触发 3 次答案

【问题标题】：prototype.onClick firing 3 times on double-clickprototype.onClick 双击触发 3 次
【发布时间】：2016-12-12 09:58:27
【问题描述】：

我继承了一些 JavaScript 代码，这些代码使用自定义 Keyboard 类和几个 prototype 方法实现软键盘 - 自定义方法和似乎覆盖某些默认值的方法。（首先坦白，我对 JavaScript 的经验不是很丰富，只略读过一些关于 prototype 方法的参考。）

prototype 方法是这样定义的，这是具体方法没有达到我的预期：

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);
        }
    }
};

（是的，我知道这是使用 IE 特定的机制；它适用于基于 IE 的嵌入式浏览器。但是，我也复制了相同的行为，通过 e 并在 Firefox 中使用 e.target。）

Keyboard 创建一个 DOM div，并为每个键附加一个 DOM span 元素，其中有几十个。

在 IE 7 和 8 模式下，这可以正常工作。无论我点击多快，每次点击我只会得到一个事件。但是在 IE >=9 和 Firefox 48 中，如果我单击两次，速度足够快（大概注册为双击，但实际上不必非常快），我得到 3 个事件，而不是 2 个。

我尝试了 event stopPropagation()、preventDefault() 和 stopImmediatePropagation() 方法，但这些方法并没有改变行为。

我猜测一些底层浏览器/JavaScript/标准的变化是造成这种不同行为的原因，但我不知道具体是什么，或者如何解决它。

除此之外，我似乎无法类似地覆盖其他一些onXxx() 事件方法。事实上，例如，原始代码有 Keyboard.prototype.onMouseDown() 和 onMouseUp() 方法，但事实证明，即使在较旧的 IE 模式下，它们也根本没有被触发。

编辑：由于很明显即使双击也会调用onClick()，所以我尝试使用detail 元素来确定这是哪种情况，并忽略“额外”调用双击，结果却是：

Firefox 看到计数为 1、2、2。我期待并指望 1、1、2
IE 似乎根本不支持这个，看到 0,0,0

【问题讨论】：

Meta：我也对为什么我没有找到任何使用 prototype 这样的方法进行事件处理的示例感兴趣。
顺便说一句，只有在 IE 11 Edge 模式下，细节值才为零。这似乎是一个错误。在 9 和 10 模式下，它们是 1、2、2。在 7 或 8 模式下，该属性根本不存在。

标签： javascript html internet-explorer browser

【解决方案1】：

好的，我已经解决了我的紧迫问题。我可以检查 type 字段中的“click”与“dblclick”。

注意：

IE >=9（和 Firefox）发送点击、点击、dblclick
IE

（仍然希望看到有关使用原型方法覆盖事件处理的良好参考。）

【讨论】：