capturing simultaneous left and right mouse button clicks in javascript - javascript

What is the best way to capture a left AND right mouse click in javascript? I'm not using jQuery (it's next on my to-learn list), just javascript for now. Basically, I want to do something like
onClick()=javascript:rightClickFunction() // do right click function
onContextMenu()=javascript:leftClickFunction() /
onBoth() ???
The only thing I could find on stackoverflow was:
How to distinguish between left and right mouse click with jQuery
How should I capture the double-button click? Can i check if the opposite button is also clicked during the R and L button routines?

You could track which mouse buttons are down with some boolean variables like this:
var leftButtonDown = false;
var rightButtonDown = false;
$(document).mousedown(function() {
if(e.which == 1) {
leftButtonDown = true;
} else if (e.which == 3) {
rightButtonDown = true;
}
});
$(document).mouseup(function() {
if(e.which == 1) {
leftButtonDown = false;
} else if (e.which == 3) {
rightButtonDown = false;
}
});
$(document).click(function() {
if(leftButtonDown && rightButtonDown) {
// left and right buttons are clicked at the same time
}
});
If both booleans are true, the right and left mouse buttons are both being clicked.

Pure Javascript solution based on the answer by Elliot:
var leftButtonDown = false;
var rightButtonDown = false;
document.addEventListener("mousedown", function () {
if (e.which == 1) {
leftButtonDown = true;
} else if (e.which == 3) {
rightButtonDown = true;
}
});
document.addEventListener("mouseup", function () {
if (e.which == 1) {
leftButtonDown = false;
} else if (e.which == 3) {
rightButtonDown = false;
}
});
document.addEventListener("click", function () {
if (leftButtonDown && rightButtonDown) {
// Click with both LMB and RMB.
}
});

For anyone still interested in a recent answer, as event.which is deprecated you can use the following code with ES6 syntax.
let leftButtonDown = false;
let rightButtonDown = false;
document.addEventListener("mousedown", (e) => {
// left click
if (e.button === 0) {
leftButtonDown = true;
}
// right click
if (e.button === 2) {
rightButtonDown = true;
}
if (leftButtonDown && rightButtonDown) {
// insert code here
}
});
document.addEventListener("mouseup", (e) => {
if (e.button === 0) {
leftButtonDown = false;
}
if (e.button === 2) {
rightButtonDown = false;
}
});
If you want to prevent the context menu from popping up you can try a variation of this:
let leftButtonDown = false;
let rightButtonDown = false;
document.addEventListener("mousedown", (e) => {
// left click
if (e.button === 0) {
leftButtonDown = true;
}
// right click
if (e.button === 2) {
rightButtonDown = true;
}
if (leftButtonDown && rightButtonDown) {
// insert code here
}
});
document.addEventListener("mouseup", (e) => {
if (e.button === 0) {
leftButtonDown = false;
}
});
document.addEventListener("contextmenu", (e) => {
if (leftButtonDown && rightButtonDown) {
e.preventDefault();
}
rightButtonDown = false;
});
Modern browsers mouse buttons mapping:
left click = 0
middle click = 1
right click = 2
IE8 and earlier mouse buttons mapping:
left click = 1
middle click = 4
right click = 2

Related

e is undefined, correct syntax for a recursive handler function

How to make a correct recursive call? In this code the console says me "e is undefined".
It's a event listener for a button ul in a unordered list.
This is my code:
$("button#ul").on("click", function(event){
var button = $(this);
$(button).toggleClass("active");
if ($(button).hasClass('active')){
//event listener
$(document).on("keydown", **checkExit** = function(e) {
if (exit(e) == true){
$(button).removeClass('active');
$(this).off("keydown");
}
**checkExit();**
});
function exit(event){
// alert("prevKeyCode: "+prevKeyCode);
var code = event.keyCode || event.which;
var doubleEnter = (code == 13 && prevKeyCode == code);
if (event.type == "click"){
return true;
}
else if (event.type == 'keydown'){
if (code == 27 || doubleEnter) {
prevKeyCode = null;
return true;
}
else if (code == 13) {
prevKeyCode = 13;
}
else {
prevKeyCode = code;
}
return false;
}
}
I think I should define outside the function checkExit...
You need to pass the event as a parameter when calling checkExit again:
$(document).on("keydown", checkExit = function(e) {
if (exit(e) == true) {
$('button').removeClass('active');
$(this).off("keydown"); //spegne il gestore corrente
}
checkExit(e);
});

Manipulating integers using a keyboard

Sorry for the vague post. I'm stuck on an online coding challenge, where the objective is that it must be possible to increase and or decrease a number using a keyboard, using the up and down keys. (all HTML-content must be created using JS)
It wants me to use addEventListener without an element object - use the event type keydown. Regardless if the buttons or the up and down keys are used, the decrease button must be 'disabled' if the values in the div-element is '1', and there can't be a number less than '1' in the div element.
Here is my code so far - I'm not sure how to incorporate the functions described above:
addEventListener('load', function() {
let button = document.createElement('input')
let secondButton = document.createElement('input')
button.setAttribute('type', 'button')
button.setAttribute('id', 'increase')
secondButton.setAttribute('type', 'button')
secondButton.setAttribute('id', 'decrease')
document.body.appendChild(button)
document.body.appendChild(secondButton)
let div = document.createElement('div')
div.setAttribute('id', 'bet-size')
div.textContent = '1'
document.body.appendChild(div)
if (Number(div.textContent) === 1) {
secondButton.setAttribute('disabled', '')
}
const increase = function() {
div.textContent = Number(div.textContent) + 1
if (Number(div.textContent) > 1) {
secondButton.disabled = false
}
}
const decrease = function() {
if (Number(div.textContent) === 2) {
secondButton.disabled = true
}
if (Number(div.textContent) > 1) {
div.textContent = Number(div.textContent) - 1
}
}
button.addEventListener('click', increase)
secondButton.addEventListener('click', decrease)
})
You want to use keyDown event's keyCode property to determine the pressed key and call increase() or decrease() accordingly. keyCode stores a number indicating the key that caused the event evocation. There are a number of sites on the internet to determine your desired key code, like this for example.
You also might want to use keyUp to determine key releases again because you might get these events multiple times and only want to react to one of them.
let isKeyDown = false;
const handleKeyDown = function(event) {
if(isKeyDown == false)
{
isKeyDown = true;
if(event.keyCode == 38) // Arrow Up
{
event.preventDefault(); // Prevent page scrolling
increase();
}
else if(event.keyCode == 40) // Arrow Down
{
event.preventDefault(); // Prevent page scrolling
decrease();
}
}
}
const handleKeyUp = function(event) {
if(isKeyDown == true)
{
isKeyDown = false;
}
}
document.addEventListener('keydown', handleKeyDown);
document.addEventListener('keyup', handleKeyUp);
Your expanded example might look like this, then:
addEventListener('load', function() {
let button = document.createElement('input')
let secondButton = document.createElement('input')
button.setAttribute('type', 'button')
button.setAttribute('id', 'increase')
secondButton.setAttribute('type', 'button')
secondButton.setAttribute('id', 'decrease')
document.body.appendChild(button)
document.body.appendChild(secondButton)
let div = document.createElement('div')
div.setAttribute('id', 'bet-size')
div.textContent = '1'
document.body.appendChild(div)
if (Number(div.textContent) === 1 ) {
secondButton.setAttribute('disabled', '')
}
const increase = function() {
div.textContent = Number(div.textContent) + 1
if (Number(div.textContent) > 1) {
secondButton.disabled = false
}
}
const decrease = function() {
if (Number(div.textContent) === 2) {
secondButton.disabled = true
}
if (Number(div.textContent) > 1) {
div.textContent = Number(div.textContent) - 1
}
}
// Required to remember if a key is already pressed or not
let isKeyDown = false;
//Event handlers for KeyUp And KeyDown
const handleKeyDown = function(event) {
if(isKeyDown == false)
{
isKeyDown = true;
if(event.keyCode == 38) // Up
{
event.preventDefault(); // Prevent page scrolling
increase();
}
else if(event.keyCode == 40) // Down
{
event.preventDefault(); // Prevent page scrolling
decrease();
}
}
}
const handleKeyUp = function(event) {
if(isKeyDown == true)
{
isKeyDown = false;
}
}
button.addEventListener('click', increase)
secondButton.addEventListener('click', decrease)
//Add the new event handlers to the document's keydown and keyup events
document.addEventListener('keydown', handleKeyDown);
document.addEventListener('keyup', handleKeyUp);
})

Javascript Play/Pause button Keyboard event

I'm still working on a music player, mouse controls have been assigned, but I'm having little trouble with keyboard events on the PLAY/PAUSE button.
So far, I got the user to be able to "click" the PLAY button by pressing SPACEBAR. What happens is that the PLAY button is being hidden and replaced by the PAUSE button.
Which I want now is getting the user to be able to press the SPACEBAR again so it "clicks" PAUSE, and therefore shows PLAY again.
Here is what I have :
html
<div>
</div>
script
<script>
/* mouse */
$('#play').on('click', function(event) {
console.log('play click clicked');
//currentPlayingTrack.play();
$('#pause').show();
$('#play').hide();
$('#pause').on('click', function(event) {
//currentPlayingTrack.pause();
$('#pause').hide();
$('#play').show();
});
/* keyboard */
var play = document.getElementById("play");
var pause = document.getElementById("pause");
document.onkeydown = function (e) {
if (e.keyCode == 32) {
play.click();
}
else if(e.keyCode == 32) {
pause.click();
}
};
</script>
What am I missing ?
the mistake is here:
document.onkeydown = function (e) {
if (e.keyCode == 32) {
play.click();
} else if(e.keyCode == 32) {
pause.click();
}
};
the second condition cannot be executed because everytime the keyCode is 32 it's goes only in the first conditions.
You can declare a variable "isPlaying" that indicate you if the player is playing.
var isPlaying = false;
document.onkeydown = function (e) {
if (e.keyCode == 32) {
if (isPlaying) {
pause.click();
} else {
play.click();
}
isPlaying = !isPlaying; // if true equal false, if false equal true
}
};
the first mistake is that you arent closing all brackets,the second is this part of code:
if (e.keyCode == 32) {
play.click();
}
else if(e.keyCode == 32) {
pause.click();
}
i suggest to use a variable for check if the button play is being pressed or not:
var ispaused = true;
var play = document.getElementById("play");
var pause = document.getElementById("pause");
$('#play').on('click', function(event) {
ispaused = false;
console.log('play click clicked');
//currentPlayingTrack.play();
$('#pause').show();
$('#play').hide();
/* keyboard */
});
$('#pause').on('click', function(event) {
ispaused = true;
//currentPlayingTrack.pause();
$('#pause').hide();
$('#play').show();
});
document.onkeydown = function (e) {
if (e.keyCode == 32) {
if(ispaused == true ){
play.click();
}else{
pause.click();
}
}
};
fiddle
It works. you double check space keyCode when you space anytime and the first condition would be true every single time.
Second, you need to use $bla instead for $("#blablabla") .It runs almost 600 line Code with find object you select everytime.So don't be let duplicate work.
Final,$() is lik $(doucument).ready().It's all done when rendered it's done and DOM it's OK.THAT IS!
** code **
$(function () {
let $play = $("#play");
let $pause = $("#pause");
$play.on('click', function (event) {
console.log('play click clicked');
//currentPlayingTrack.play();
$pause.show();
$play.hide();
});
$pause.on('click', function (event) {
//currentPlayingTrack.pause();
$pause.hide();
$play.show();
});
/* keyboard */
document.onkeydown = function (e) {
if (e.keyCode == 32) {
toggle = !toggle;
$play.trigger("click");
}
else if (e.keyCode == 32) {
toggle = !toggle;
$pause.trigger("click");
}
};
});
Seems like you're missing a bit more knowledge of js which will come with time :) Here's a codepen on how I'd accomplish this.
http://codepen.io/smplejohn/pen/zNVbRb
Play
Pause
$('.playpause').click(function(){
$('.playpause').toggle();
return false;
});
document.onkeydown = function (e) {
if (e.keyCode == 32){
$('.playpause').toggle();
}
};

Key pressed and click in the same time

how can I merge keypress and on click? I mean when a user press enter and click somewhere in the same time I need to invoke a function.
$(document).keypress(function(e) {
var code = e.keyCode || e.which;
if(code == 13) {
alert('keypress');
}
});
$(document).on( "click", function() {
alert('click');
});
I have this code but I am not able to merge it (usually I don't work with jQuery/javascript).
Something like this may do the trick
var pressingEnter = false;
$(document).on({
keydown: function(e) {
if(e.which == 13) {
// enter is being pressed, set true to flag variable
pressingEnter = true;
}
},
keyup: function(e) {
if(e.which == 13) {
// enter is no longer pressed, set false to flag variable
pressingEnter = false;
}
},
click: function() {
if (pressingEnter) {
console.log('click and enter pressed');
}
}
});
BTW: there is no need to do var code = e.keyCode || e.which; since jQuery resolves that for you. You can use e.which on any browser.
EDIT
This version should allow any order of key pressed / mouse click. I'm assuming only left click is captured. Logic to handle enter + mouse click is placed on keydown and mousedown (it could be moved to keyup and mouseup if makes more sense)
Changed alert by console.log since the first prevents mouseup event to be triggered. Nowdays we have hundred of better ways to show a message to user than built-in alert pop ups so I'll assume making it work for it is not a requirement.
var pressingEnter = false;
var clickingMouseButton = false;
$(document).on({
keydown: function(e) {
if(e.which == 13) {
pressingEnter = true;
}
if (clickAndEnterPressing()) {
console.log('click and enter pressed');
}
},
keyup: function(e) {
if(e.which == 13) {
pressingEnter = false;
}
},
mousedown: function(e) {
if (e.which == 1) {
clickingMouseButton = true;
}
if (clickAndEnterPressing()) {
console.log('click and enter pressed');
}
},
mouseup: function(e) {
if (e.which == 1) {
clickingMouseButton = false;
}
}
});
function clickAndEnterPressing() {
return pressingEnter && clickingMouseButton;
}
Here's an example that will work if enter is pushed first or if the mouse is clicked first or if they are both pressed within a certain threshold of time apart (I set it to 100 ms, but this can be easily adjusted):
var enterDown = false;
var mouseDown = false;
var lastEnter = false;
var lastMouseUp = false;
var triggerOnNextUp = false;
$(document).on({
keydown: function(e) {
enterDown = true;
},
keyup: function(e) {
if(e.which == 13) {
lastEnter = (new Date()).getTime();
enterDown = false;
detectEnterAndClick();
if (mouseDown) {
triggerOnNextUp = true;
}
}
},
mousedown: function() {
mouseDown = true;
},
mouseup: function() {
lastMouseUp = (new Date()).getTime();
mouseDown = false;
detectEnterAndClick();
if (enterDown) {
triggerOnNextUp = true;
}
}
});
function detectEnterAndClick() {
if (Math.abs(lastEnter - lastMouseUp) < 100 || triggerOnNextUp) {
// Reset variables to prevent from firing twice
triggerOnNextUp = false;
enterDown = false;
mouseDown = false;
lastEnter = false;
lastMouseUp = false;
$("body").append("Clicked and pushed enter<br>");
}
}
See it on JSFiddle
There is no way to 'merge' events. However you could for example debounce your handler. For example (using lodash):
var handler = _.debounce(function(event) { alert(event.type); }, 100);
$(document)
.on('click', handler)
.on('keypress', handler);
you can use the event.type to determine what triggered the event
Demo
$(function(){
$(document).on("click", ClickAndKeyPress);
$(document).on("keypress", ClickAndKeyPress);
});
function ClickAndKeyPress(event){
$("div").text(event.type);
}

keydown event not fired, why?

In JavaScript, I hold two keys down, and keydown is fired perfectly. When I release one of the keys, keyupis fired. So far so good. But I am still holding one key down, so why arent keydown fired? I need this to happen in my game. Am I doing something wrong? Is this the expected response? Is there a work around or something?
window.addEventListener("keydown",
function (e) {
console.log('down');
}, false);
window.addEventListener('keyup',
function (e) {
console.log('up');
}, false);
Looks to me like you're trying to do something like this:
var down = false;
var up = false;
document.body.addEventListener('keydown', function (e) {
if(e.which === 40) {
down = true;
}
if(e.which === 38) {
up = true;
}
});
document.body.addEventListener('keyup', function (e) {
if(e.which === 40) {
down = false;
}
if(e.which === 38) {
up = false;
}
// logic here for one but not the other
if(down && !up) {
alert('down but not up!');
}
});

Categories