如何跨浏览器捕获按钮的所有单击事件？

Question

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

简单地绑定“click”处理程序在除IE外的所有浏览器中都可以完美运行。

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

明显的解决方案/黑客（至少对我来说）是在IE中附加一个dblclick处理程序，触发我的click处理程序两次。另一个想法是使用mousedown/mouseup自己跟踪点击，这似乎相当原始，可能应该放在框架而不是我的应用程序中。

那么，处理这种情况的最佳/通常/正确方式是什么？（纯Javascript或jQuery优先）

- sany

Answer 1

鼠标按下和松开的功能与单击函数类似，不幸的是当IE因为双击而省略单击时，它也会省略鼠标按下和松开。无论如何，您可以将单击和双击添加到同一对象中，并通过一个函数将点击传递，以便筛选出任何发生在上次点击太近的点击。

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

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

顺便说一下，我刚刚发现，在Firefox中，双击事件没有给出事件时间，因此我不得不使用Date方法来解决这个问题。

- aaaaaaaaaaaa

Answer 2

根据您的情况，您可以使用不同的方法，但我建议使用类似这样的带命名空间的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();
});

我不确定这会按照你想要的方式工作，但是至少它是一个开始。

- Igor Zinov'yev

---

看起来很有趣，从未使用过命名空间事件，谢谢！这真的非常有用，不知道为什么我在阅读jq文档时错过了它。 - vittore