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";
}
Related
I want to implement a canvas minesweeper game using plain javascript. I use 2D array for my grid. For the game, I need to detect right and left mouse clicks, each of which will do different things. My research directed me towards mousedown, mouseup, contextmenu, however, my code does not seem to work, as for the right click it does the functions for both right and left click,because the mouseup event gets triggered for the right click as well. Can anyone help me understand how to distinguish between the two? I ran into examples of event.which, where left click is event.which === 0, and the right click is event.which === 2, but that works only for buttons, as far as I understood.
Here is the code.
canvas.addEventListener('mouseup', function(evt) {
let x1 = Math.floor(evt.offsetX/(canvas.height/rows));
let y1 = Math.floor(evt.offsetY/(canvas.width/cols));
draw (y1, x1); //this is my drawing functions (draws the numbers, bombs)
}, false);
canvas.addEventListener('contextmenu', function(evt) {
let j = Math.floor(evt.offsetX/(canvas.height/rows));
let i = Math.floor(evt.offsetY/(canvas.width/cols));
ctx.drawImage(flagpic, j*widthCell+5, i*widthCell+2, widthCell-9,
widthCell-5); //draws the flag where right mouse clicked
}, false);
Use click event for left click:
canvas.addEventListener('click', function(evt) { // No right click
And use contextmenu for right click: (Right click from keyboard context menu, also allowing you mouse right click)
canvas.addEventListener('contextmenu', function(evt) { // Right click
You need to call evt.preventDefault() as well for preventing the default action.
For your context, if you wanted to use mousedown or mouseup events, then you can use event.button to detect the clicked button was left:
canvas.addEventListener('mousedown', function(evt) {
if(evt.button == 0) {
// left click
}
Here's the button click values:
left button=0,
middle button=1 (if present),
right button=2
You can look on the example shown in the following link for greater details:
MouseEvent.button
<script>
var whichButton = function (e) {
// Handle different event models
var e = e || window.event;
var btnCode;
if ('object' === typeof e) {
btnCode = e.button;
switch (btnCode) {
case 0:
console.log('Left button clicked.');
break;
case 1:
console.log('Middle button clicked.');
break;
case 2:
console.log('Right button clicked.');
break;
default:
console.log('Unexpected code: ' + btnCode);
}
}
}
</script>
<button onmouseup="whichButton(event);" oncontextmenu="event.preventDefault();">
Click with mouse...
</button>
Try this might work for you
document.getElementById("mydiv").onmousedown = function(event) {
myfns(event)
};
var myfns = function(e) {
var e = e || window.event;
var btnCode;
if ('object' === typeof e) {
btnCode = e.button;
switch (btnCode) {
case 0:
console.log('Left');
break;
case 1:
console.log('Middle');
break;
case 2:
console.log('Right');
break;
}
}
}
<div id="mydiv">Click with mouse...</div>
Reference
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
When I Right clicked in my Table Column. i get 3-5 alert screen. I Think there is any loop.. My Algorithms is When i clicked right get alert screen . if i press "OK" My Column is going to delete if i press "NO" My Column is not going to delete . But. When I press some options. I get 3-5 Alert screen too.. Can Anyone help me ?
$(".Stok_Satis").mousedown(function(ev) {
if (ev.which == 3) //mouse sağ click
{
id = $(this).attr("id");
alert(Sil);
if (confirm('Seçileni silmek istediğinize emin misiniz ?')) {
if (Sil < 1) {
Sil = 5;
$("#satissatir #" + id).remove();
removeByIndex(tablo, id);
alert(tablo);
i--;
return;
//return true ;
}
//Sil=false;
} else {
Sil++;
return;
//Sil=false;
//return false ;
}
} else if (ev.which == 1) //mouse sol click
{
alert("sol click");
}
});
Here is a working sample for you. Just attach your logic under case 3. You will see that left click is captured by jQuery event however no action is taken.
$('body').mousedown(function(event) {
switch (event.which) {
case 1:
break;
case 2:
alert('Middle Mouse button pressed.');
break;
case 3:
alert('Right Mouse button pressed.');
//Your code should come here
break;
default:
alert('Unknown mouse click action.');
}
});
<body>
Test
</body>
Fiddle: https://jsfiddle.net/c08nfp09/
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?
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();
});
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.
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.
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;
};
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
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>
Is there a way to listen on all the ways a user could trigger an undo on a contenteditable div? For example when the user hits Control+Z, Right-click -> Undo, or in the file menu Edit -> Undo.
I'm not looking for undo/redo algorithms or implementations, just the ability to listen to the event and overwrite the behavior.
You can get event.inputType of input event. Check for "historyUndo" / "historyRedo":
var div = document.getElementById("mydiv");
div.addEventListener("input", function(e) {
switch(e.inputType){
case "historyUndo": alert("You did undo"); break;
case "historyRedo": alert("You did redo"); break;
}
});
<div id="mydiv" contenteditable="true">Hello world!</div>
In recent browsers, you can cancel the event using the beforeinput event (not in Firefox yet):
var div = document.getElementById("mydiv");
div.addEventListener("beforeinput", function(e) {
switch(e.inputType){
case "historyUndo": e.preventDefault(); alert("Undo has been canceled"); break;
case "historyRedo": e.preventDefault(); alert("Redo has been canceled"); break;
}
});
<div id="mydiv" contenteditable="true">Hello world!</div>
References:
InputEvent specification and other inputType values: https://w3c.github.io/input-events/#interface-InputEvent-Attributes
Browser compatibility for beforeinput: https://caniuse.com/#feat=mdn-api_htmlelement_beforeinput_event
Well, the Ctrl+Z/Y is possible, but I don't know about the Right-click->Undo/Redo part.
$(document).keydown(function (e) {
var thisKey = e.which;
if (e.ctrlKey) {
if (thisKey == 90) alert('Undo');
else if (thisKey == 89) alert('Redo');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Control z example at How to detect Ctrl+V, Ctrl+C using JavaScript?
for rightclick you can show a div on a right click How can I capture the right-click event in JavaScript?
then when they click the undo option on the div. just put in a onclick function.
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;
}
});
});