I need really fast answer. How to distinguish between left and right click inside a function. Code looks like this:
<p onclick="FuncOnClick()">
function FuncOnClick() {
//how to do distinguish?
}
You can do it like this. Using the HTML onclick does not work for right click. But adding the event listener in Javascript instead does seem to work.
document.getElementById('click').onmousedown = FuncOnClick;
function FuncOnClick(event) {
console.log(event.which);
switch (event.which) {
case 1:
alert('Left');
break;
case 3:
alert('Right');
break;
}
}
<p id="click">test</p>
You can do like this :-
$('#mouseClick').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:
alert('You have a strange Mouse!');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="mouseClick">Click here</p>
Related
I have an input field that shows suggestions with a dropdown menu while i type. My example is simpified, but the problem is the same.
If I have focus on the top menu item and press the arrow up key I would like to set focus on the input field (without closing the menu).
It seems like Bootstrap is preventing event bubbeling of some of the keys.
The escape key is just for testing. It's the arrow up key I want to use.
You can find a jsfiddle here.
EVENT KEY RESULT
keypress [any] not working
keydown arrowup not working
keydown escape working
keyup arrowup working, but will move focus when on second item too
HTML:
<div class="dropdown">
<input type="text" class="form-control">
<ul class="dropdown-menu" role="menu">
<li><a href="#" id='AAAA'>AAAA</a></li>
<li>BBBB</li>
<li>CCCC</li>
</ul>
</div>
JS:
$('.form-control').bind('keypress', function(event) {
if (event.key === 'ArrowDown') {
if ($('.dropdown').hasClass('open')) {
$('#AAAA').focus();
} else {
$('.dropdown').addClass('open');
}
}
});
$('#AAAA').bind('keyup', function(event) {
switch (event.key) {
case 'ArrowUp':
$('.form-control').focus();
break;
case 'Escape':
$('.form-control').focus();
break;
}
});
Well, I first closed the dropdown ( removed the open class ) and then focused on the input. It seems to be working now.
$('#AAAA').bind('keydown', function(event) {
switch (event.key) {
case 'ArrowUp':
$('.dropdown').removeClass('open');
$('input').focus();
break;
case 'Escape':
$('.form-control').focus();
break;
}
});
Edit ( After you updated your question ): keydown is being used by bootstrap. You can bind all events on keyup. keyup event fires after keydown so you don't need to use setTimeout()
$('#AAAA').bind('keyup', function(event) {
switch (event.key) {
case 'ArrowUp':
$('.form-control').focus();
break;
case 'Escape':
$('.form-control').focus();
break;
}
});
Edit 2 ( Solves the: If you press the up key when on the second item, you will release the key on the first item and it will set focus on the input ) I kept the use of setTimeout() to let bootstrap complete its own working. This will also let keypress work from bottom to input. jsFiddle Link
$('.dropdown').on('keydown.bs.dropdown.data-api', function(e) {
var index = $(this).find('li:not(.disabled):visible a').index(e.target);
if (!index && e.which == 38) {
setTimeout(function() {
$('.form-control').focus();
}, 1);
}
});
I solved it like this until anyone can find a better solution. I wrapped the focus() in a timer.
$('#AAAA').bind('keydown', function(event) {
switch (event.key) {
case 'ArrowUp':
setTimeout(function() {
$('.form-control').focus();
}, 1);
break;
case 'Escape':
$('.form-control').focus();
break;
}
});
How can give arrow key events in full page image slider, for example the below sample link -> https://www.htmllion.com/examples/pure-css-based-fullscreen-slider-demo.html.
I need the same layout with arrow key events.
Kindly help.
Use Keyboard events in Jquery. Based on the user click navigate the page
Using jQuery you can do something like this.
$(window).on('keyup', function(e){
console.log(e.keyCode); // log the keycode of the key pressed
switch(e.keyCode){
case 37:
console.log('Prev');
break;
case 38:
console.log('Up');
break;
case 39:
console.log('Next');
break;
case 40:
console.log('Down');
break;
}
});
You can add a keydown event to any element and call a function.
In the below example i have used an input text field to add a keydown event and it gives alert on pressing left or right arrow key
function myFunction(event) {
var keyVal = event.keyCode;
switch(keyVal)
{
case 37:
alert('Pressed left');
break;
case 39:
alert('Pressed right');
break;
}
}
<input type="text" onkeydown="myFunction(event)">
Still beginner here, please be gentle :)
I have a CSS-lighbox with 3 links: previous image, next image and exit. The links are like that:
<img src="images/prev.png" />
Then i have a KBD listening script:
function kbdNav(e) {
switch(e.keyCode) {
case 37:
// activate link "prev"
break;
case 39:
// activate link "next"
break;
case 27:
// activate link "exit"
break;
}
}
My goal is that when the KBD arrow is pressed (case 37) the link # prev.png gets activated, so that the lightbox image goes to the previous image. Same for the other 2 cases.
What method can be used for this?
First, select the anchor elements:
var prevLink = document.querySelector('.prev');
var nextLink = document.querySelector('.next');
var exitLink = document.querySelector('.exit');
Then edit the listener as follows:
function kbdNav (e) {
switch (e.keyCode) {
case 37:
prevLink.click();
break;
case 39:
nextLink.click();
break;
case 27:
exitLink.click();
}
}
Consider this topic closed. The solution works, but my HTML was quite messily structured.
I found a better solution with a pure JS gallery/lightbox.
I have some set of HTML files named in sequence. Is it possible to assign mouse right click to next html page and mouse left click to previous html page and how to do this?
This is how we handles the mouse click..
$('#element').mousedown(function(event) {
switch (event.which) {
case 1:
alert('Left mouse button pressed');
//code to navigate to left page
break;
case 2:
alert('Right mouse button pressed');
//code to navigate to right page
break;
default:
alert('Mouse is not good');
}
});
$(function(){
$(document).mousedown(function(event) {
switch (event.which) {
case 1:
window.location.href = "http://stackoverflow.com" // here url prev. page
break;
case 3:
window.location.href = "http://www.google.com" // here url next. page
break;
default:
break;
}
});
})
And don't forgot add jquery library.
You can also do this with some simple Javascript.
<script type='text/javascript'>
function right(e){
//Write code to move you to next HTML page
}
<canvas style='width: 100px; height: 100px; border: 1px solid #000000;' oncontextmenu='right(event); return false;'>
//Everything between here's right click is overridden.
</canvas>
This is the traditional way to override left and right clicks. In the code I'm preventing event propagation of the right-click also so the context menu won't display.
JSFiddle
window.onclick = leftClick
window.oncontextmenu = function (event) {
event = event || window.event;
if (event.stopPropagation)
event.stopPropagation();
rightClick();
return false;
}
function leftClick(event) {
alert('left click');
window.location.href = "http://www.google.com";
}
function rightClick(event) {
alert('right click');
window.location.href = "http://images.google.com";
}
I am having problems with a jquery slideshow where I want to bind next/right to make the images jump forwards/back.
I used the following code to attempt to do it but it simply refreshes the page.
<script>
$(function() {$(document).keyup(function(e) {
switch(e.keyCode) { case 37 : window.location = $('#prev a').attr('href'); break;
case 39 : window.location = $('#next a').attr('href'); break; }});});
</script>
The I was attempting to call were:
<a href='#' id='prev' onclick='show_image($prev); return false;'>
and
<a href='#' id='next' onclick='show_image($next); return false;'>
Does anyone know an easy way to cut out the middle man and simply bind left/right to the onclick event for each?
Anyhelp would be much appreciated!
This should work:
$(function() {
$(document).keyup(function(e) {
switch (e.keyCode) {
case 37:
$('#prev a')[0].onclick();
break;
case 39:
$('#next a')[0].onclick();
break;
}
});
});
Just call the onclick event handler of the left or right button based on which key you pressed.
$(function() {
$(document).keyup(function(e) {
switch (e.keyCode) {
case 37:
$('#prev').click();
break;
case 39:
$('#next').click();
break;
}
});
});