CODEWITHSUNDEEP
javascriptjquery
Harman met
Harman met

Reputation: 251

How to detect right click + left click

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?

Upvotes: 4

Views: 16498

Answers (6)

Kamil Kiełczewski
Kamil Kiełczewski

Reputation: 92367

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>

Upvotes: 0

Dimitris Karagiannis
Dimitris Karagiannis

Reputation: 9358

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();
});

Upvotes: 9

weaknespase
weaknespase

Reputation: 1034

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.

Upvotes: 2

Ramanlfc
Ramanlfc

Reputation: 8354

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;
};

Upvotes: 1

Rohit
Rohit

Reputation: 179

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

Upvotes: 0

Kiknaio
Kiknaio

Reputation: 76

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.

Upvotes: 1

Related Questions