How to detect right click + left click

Question

I am building a game

And I need to do something when the user clicks on the right mouse button, holds it and then presses the left button

How can I detect this behaviour?

Welcome to SO. Please visit the [help] to see how to ask. Hint: Show code. I actually thought it was a duplicate of http://stackoverflow.com/questions/1206203/how-to-distinguish-between-left-and-right-mouse-click-with-jquery — mplungjan, Mar 13 '16 at 17:08

Dimitris Karagiannis · Accepted Answer · 2016-03-13T17:45:17.630

7

JSfiddle: https://jsfiddle.net/mkarajohn/pd725ch6/5/

var rightMouseClicked = false;

function handleMouseDown(e) {
  //e.button describes the mouse button that was clicked
  // 0 is left, 1 is middle, 2 is right
  if (e.button === 2) {
    rightMouseClicked = true;
  } else if (e.button === 0) {  
    //Do something if left button was clicked and right button is still pressed
    if (rightMouseClicked) {
      console.log('hello');
      //code
    }
  }
  console.log(rightMouseClicked);
}

function handleMouseUp(e) {
  if (e.button === 2) {
    rightMouseClicked = false;
  }
  console.log(rightMouseClicked);
}

document.addEventListener('mousedown', handleMouseDown);
document.addEventListener('mouseup', handleMouseUp);
document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
});

edited Mar 13 '16 at 17:45

answered Mar 13 '16 at 17:17

Dimitris Karagiannis

8,942
8
38
63

No particular reason, just added them at some point and forgot about them. – Dimitris Karagiannis Mar 13 '16 at 17:43
Just updated the answer to include a preventDefault so that the context menu does not show on right click. – Dimitris Karagiannis Mar 13 '16 at 17:45
Hey, its dosent work me can you take a look http://stackoverflow.com/questions/35984682/dettect-right-click-left-click-not-working ? – Harman met Mar 14 '16 at 10:13

weaknespase · Answer 2 · 2016-03-13T17:23:57.960

2

Use MouseEvent.buttons in your event handler.

<element>.addEventListener("mousedown", function(event){
    if ((event.buttons & 3) === 3){
        //Do something here
    }
}, true);

It is kinda recent though, you may want to implement fallback method, recording state of mouse buttons.

edited Mar 13 '16 at 17:23

answered Mar 13 '16 at 17:18

weaknespase

1,014
8
15

score 1 · Answer 3 · answered Mar 13 '16 at 17:14

1

You can try this one.

window.oncontextmenu = function () {
  showCustomMenu();
  return false;     // cancel default menu
}

on right click every browser has default menu for refreshing page, printing, saving and lot more but you can try this one and may be it will prevent default action and add your custom. please write down answer if it will help you.

answered Mar 13 '16 at 17:14

Kiknaio

76
2
9

This event isn't supported everywhere yet and doesn't trigger on disabled elements in IE. – Scott Marcus Mar 13 '16 at 17:17

score 1 · Answer 4 · answered Mar 13 '16 at 17:20

1

for right click use oncontextmenu and for left just set up click , just disable their default behaviours if you want too, ex:

var left = 0,
  right = 0;

document.onclick = function() {
  console.log(++left);
  return false;
};

document.oncontextmenu = function() {
  console.log(++right);
  return false;
};

answered Mar 13 '16 at 17:20

Ramanlfc

8,283
1
18
24

`click` event generated after user releases button. Author wants to get notification when both buttons held, i think – weaknespase Mar 13 '16 at 17:25

score 0 · Answer 5 · answered Mar 13 '16 at 17:15

Hie

check below code

<!doctype html>
<html lang="en">
<head>
  <input type='button' value='Click Me!!!' id='btnClick'/>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<script>
$(document).ready(function() {
$('#btnClick').mousedown(function(event){
    switch (event.which) {
        case 1:
            alert('Left mouse button pressed');
            break;
        case 2:
            alert('Middle mouse button pressed');
            break;
        case 3:
            alert('Right mouse button pressed');
            break;
        default:
           break;
    }
});
});
</script>

</body>
</html>

For more reference refer http://www.jquerybyexample.net/2011/04/find-which-mouse-button-clicked-using.html

score 0 · Answer 6 · answered Jul 11 '19 at 04:00

Try

var hold=false;

function check(e) {
  if(e.button==2) hold=true;
  if(e.button==0 && hold) console.log('action');
}

function release(e) {
  if(e.button==2) hold=false;
}

function noContext(e) { e.preventDefault(); }

.box { width: 100px; height: 100px; border: 1px solid black;}

Hold right mouse button and press left (on sqare)
<div class="box" 
     onmousedown="check(event)" 
     onmouseup="release(event)"  
     oncontextmenu="noContext(event)"
></div>

How to detect right click + left click

6 Answers6

Linked