javascript - 检查何时使用鼠标中键双击元素

Question

<div style="width: 250px;
height: 100px;
background-color: Green; 
border-style: solid; 
border-color: Black;"></div>

使用上面的代码，我创建了一个带有黑色轮廓的绿色框。 Fiddle .

下面，我有一个 Javascript 函数 myFunction()。

function myFunction() {
  window.alert("Hello world!");
}

当用户连续两次使用鼠标中键且鼠标位于绿色框中时，如何运行此函数(与双击鼠标左键的速度一样快)？

Answer 1

纯 JavaScript 1:

^{跨浏览器支持}

var div = document.getElementsByTagName("div")[0];

var count = 0;
var timeout;

div.onmouseup = function(e){       // thanks RobG, it should be `mouseup`
    if(e.which == 2){
        count++;

        if(!timeout){
            timeout = setTimeout(function(){
                timeout = undefined;
                check();
            }, 250);
        }
    }else{
        count = 0;
    }
};

function check(){
    if(count >= 2){
        alert('y');
    }
    count = 0;
}

DEMO

使用 jQuery:

^{无法在 Firefox 27.0 中工作 - 使用“Plain JS 1”}

$("div").dblclick(function(e){
    if(e.which == 2)
        alert('y');
})

DEMO

纯 JavaScript 2:

^{在 Safari 7/FireFox 27.0 中不起作用 - 使用“Plain JS 1”}

var div = document.getElementsByTagName("div")[0];

div.ondblclick = function (e) {
    if(e.button == 1) alert('y');
};

DEMO