捕获按钮上的所有单击的跨浏览器方式是什么？答案

【问题标题】：What's the cross-browser way to capture all single clicks on a button?捕获按钮上的所有单击的跨浏览器方式是什么？
【发布时间】：2011-02-04 08:09:40
【问题描述】：

无论点击速度和浏览器如何，每次单击按钮时只执行一次的最佳方法是什么？

只需绑定一个“点击”处理程序即可在除 IE 之外的所有浏览器中完美运行。

在 IE 中，当用户点击太快时，只会触发“dblclick”，因此永远不会执行“click”处理程序。其他浏览器会触发这两个事件，所以这对他们来说不是问题。

显而易见的解决方案/hack（至少对我而言）是在 IE 中附加一个 dblclick 处理程序，该处理程序会触发我的点击处理程序两次。另一个想法是自己用 mousedown/mouseup 跟踪点击，这看起来很原始，可能属于框架而不是我的应用程序。

那么，处理此问题的最佳/通常/正确方法是什么？（首选纯 Javascript 或 jQuery）

【问题讨论】：

标签： javascript jquery internet-explorer cross-browser dom-events

【解决方案1】：

根据您的情况，您可以使用不同的方法，但我建议使用带有 jQuery 的命名空间事件处理程序，如下所示：

function eventHandler(event) {
    // your handler code here
    doSomeMagic();
}

var element = $('#element');

element.one('click.someNameSpace', function(event){
    // first we unbind all other event handlers with this namespace
    element.unbind('.someNameSpace');

    // then we execute our eventHandler
    eventHandler();
}).one('dblclick.someNameSpace',  function(event){
    // If this fires first, we also unbind all event handlers
    element.unbind('.someNameSpace');

    // and then execute our eventHandler
    eventHandler();
});

我不确定这是否会如你所愿，但我想这是一个开始。

【讨论】：

看起来很有趣，从未使用过命名空间事件，谢谢！太有用了，不知道为什么我错过了阅读 jq doc

【解决方案2】：

Mousedown 和 mouseup 就像 click 函数一样工作，不幸的是，当 IE 由于双击而忽略单击时，它也会忽略 mousedown 和 mouseup。在任何情况下，您都可以将 click 和 dblclick 添加到同一个对象，并通过一个函数提供点击，该函数可以对发生的任何点击太接近最后一次进行排序。

<div onclick="clk()" ondblclick="clk()"></div>

lastclicktime=0
function clk(){
    var time=new Date().getTime()
    if(time>lastclicktime+50){
        lastclicktime=time
        //Handle click
    }
}

我刚刚发现，至少在 Firefox 中，dblclick 事件没有给出事件时间，因此我不得不解析为 Date 方法。

【讨论】：