CODEWITHSUNDEEP
javascript
chris97ong
chris97ong

Reputation: 7070

Check when element is double-clicked with middle mouse button

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

With the code above, I create a green box with a black outline. Fiddle.

Below, I have a Javascript function myFunction().

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

How do I get this function to run when the user uses his middle mouse button twice in a row with his mouse in the green box (as quickly as how someone double-clicks with his left mouse button)?

Upvotes: 1

Views: 1022

Answers (3)

RobG
RobG

Reputation: 147453

Here is a function version of Gaurang's answer, however I can't get it to work reliably on Mac OS (nor is Gaurang's answer reliable). Anyway, it might be useful.

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

Upvotes: 0

Gaurang Tandon
Gaurang Tandon

Reputation: 6761

Plain JavaScript 1:

Cross browser support

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

With jQuery:

Not working in Firefox 27.0 - use "Plain JS 1"

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

DEMO

Plain JavaScript 2:

Doesn't work in Safari 7/FireFox 27.0 - use "Plain JS 1"

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

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

DEMO

Upvotes: 1

bitfiddler
bitfiddler

Reputation: 2115

Start simple. Add a click handler to you div like this:

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

Get that working, then search for how to modify the click event to use other buttons

Upvotes: 0

Related Questions