I have a game I made with HTML5, CSS, and JavaScript. I have images of joystick arrows. I would like users to be able to click my joystick arrows and have it work as if the arrows on the keyboard were pressed. I wrote the code like this but it doesn't work:
var $rt_arrow = $('.rt_arrow')
$rt_arrow.on('click' , function (e) {
e.keyCode == 39
}
How do I make keyCode 39 fire when the image of the right arrow is clicked?
Maybe it would be a clearer approach to write a callback function and assign it to the keyboard right arrow and to the right arrow.
function goRight() { console.log('I go right');}
$('.rt_arrow').on('click', goRight);
$(document).on('keydown', function(e) {
if ( e.key === 'ArrowRight' ) {
goRight();
}
});
Related
I recently came across a requirement to close a Modal on Esc key press (508 compliance). I then realised that the onKeyDown handler I wrote on my react component wasn't working as expected. The event wasn't getting fired on clicking Escape key from my macbook pro's touch bar. Has anyone gone through similar issue ?
If yes, is there a workaround ?
You should write onKeyDown={(e) => yourFunctionName(e)} on the Modal element and your function should look like something like this
const yourFunctionName = (e) => { if (e.key === "ENTER") { closeModal() } }
Make sure Esc key-code is 27
func((e) => e.keyCode === '27'){
//your code }
Trying to create a minesweeper game, where a right click would add a flag. The right click event, however, is currently not working, i.e, not able get the value of event.which for right and middle mouse button. Just getting contextMenu.
Sample JS:
var trig = function (event) {
if(event.which==1){
//do something on left click
}
else if(event.which === 3)
{
event.preventDefault();
console.log(event.isDefaultPrevented());
//Do something on right click.
}
}
$('.block').click(trig);
Can anyone please tell, a plausible reason why that is happening?
preventDefault was only added as the conextmenu was becoming annoying.
MouseEvent.button
0 for Left mouse button, 1 for Wheel button or middle button (if present) and
2 for Right mouse button.
Internet Explorer 8 and earlier has different values:
1 for Left mouse button, 2 for Right mouse button and
4 for Wheel button or middle button (if present).
Change
else if(event.which === 3)
To
else if(event.which === 2 || event.which === 3)
OR: For IE <= 8
else if(event.which === 2 || event.which === 4)
I have a button with an anchor, that I would like to trigger with the spacebar for accessibility reasons. Instead, clicking the spacebar jumps the page down when button is in focus.
Go to Stack Overflow
I have tried eating the spacebar key:
window.onkeydown = function(e) {
return !(e.keyCode == 32);
};
but of course this is not what I want. I'm not sure if mapping the spacebar key to the enter key is a smart solution, or if its possible. How can I trigger a button with the spacebar using pure JS?
You might want to look into a prevent default solution:
window.onkeydown = function(event){
if(event.keyCode === 32) {
event.preventDefault();
document.querySelector('a').click(); //This will trigger a click on the first <a> element.
}
};
That will stop the space bar from performing the default action (to send a space) and then you can add your scroll to command below that inside the function.
Give your a link an id and try this:
var link = document.getElementById("link");
document.onkeydown = function (e) {
if (e.keyCode == 32) {
link.click();
}
};
<script>
$("#test_img").click(function() {
alert("Hello");
});
</script>
But it doesn't matter what mouse button I'm pressing - right or left. I see absolutely the same result. I want alert to be shown only on left mouse button click.
Thank you and sorry; I'm little new to javascript.
Thank you.
You can evaluate the event.which attribute to determine which button has been pressed.
$("#test_img").mouseup(function(e) {
// e.which is 1, 2 or 3 for left / middle / right mouse button
if (e.which === 1) {
//continue
}
});
Furthermore, to safely detect a mousebutton, you cannot use the click-event! Use mousedown or mouseup instead.
Try it out here!
Is there any to make the left arrow behave like the tab button (set focus to the next focusable item) and the right arrow behave like a shift+tab (set focus to the previous focusable item)?
I've gotten this far:
$().keypress(function(e) {
if (e.keyCode == 37) {
alert('I want to do a shift-tab');
}
else if (e.keyCode == 39) {
alert('I want to do a tab');
}
});
But google isn't being that helpful so I thought I'd put a quick post up here while I google some more.
Thanks!
Oh, and it's purely for FF3.0 so I don't need to worry about other browser nuisances.
What you have so far seems fine.
You could keep a list of 'focusable' items and just iterate through the list keeping a pointer to the current one:
// or $('input')..depends what you want to focus on
var nodes = $('.focusable'), idx = -1;
$().keypress( function(e) {
if (e.keyCode === 37) {
nodes.get(++idx).focus();
}
else if (e.keyCode === 39) {
nodes.get(--idx).focus();
}
});
This is just a rough outline though. You'd need to check the idx before doing something to make sure you don't slip past the beginning or end of the focusable elements array. You'll also need to be careful about calling this when the user is inside of a textbox.