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

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

Answer 2

开始简单。像这样为你添加一个点击处理程序：

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

让它工作，然后搜索如何修改click事件以使用其他按钮

Answer 3

以下是Gaurang答案的功能版本，但我无法在Mac OS上可靠地运行（Gaurang的答案也不可靠）。无论如何，它可能是有用的。

// Listener to add
function foo(e) {
  console.log(this.id + ':' + e.button);
}

// Main function
var addNonPrimaryDblclick = (function() {

  var timeout = null,
      count = 0,
      delay = 250;

  // If timeout expires, reset everything
  function checkTimeout() {
    if (timeout) {
      clearTimeout(timeout);
      timeout = null;
      count = 0;
    }
  }

  return function(element, listener, newDelay) {

    if (typeof newDelay != 'undefined') delay = newDelay;

    // Add isDoubleClick as listener 
    element.addEventListener('mouseup', isDoubleClick, false);

    function isDoubleClick(e) {

    // A bit of debug
    console.log('button: ' + e.button + '  which: ' + e.which);

    e.preventDefault();

      // 2 is the secondary button, equivalent to 3 in "which" scheme
      if (e.button == 2) {
         count++;

        if (timeout) {

          // If this is second click within delay, reset everything
          // and call listener            
          if (count == 2) {
            clearTimeout(timeout);
            timeout = null;
            count = 0;

            // Set element to "this" in the listener and pass event
            listener.call(element, e);
            return;
          }

        // If no timeout setup, doso
        } else {
          timeout = setTimeout(checkTimeout, delay);
        }
      }
    }
  }
}());

// Example use - set long delay for testing
addNonPrimaryDblclick(document.getElementById('d0'), foo, 1000);