We Keep Coding

How to properly detect mouse right click?

I'm trying to detect mouse right click but the following code only detects the left click.
window.oncontextmenu = function () {
return false;
}
document.body.onclick = function (e) {
console.log("clicked", e);
}
What is wrong with my code and how can I fix this?
I'm using the latest Chrome on macOS.

window.oncontextmenu is already detecting mouse right click. What it does is disabling the default browser right click context menu for now, but you can add any additional code above it to trigger whenever right click event is performed.
window.oncontextmenu = function () {
console.log("right clicked");
return false;
}
You can try by running the code snippet and right clicking the empty space. Left clicking will not print the console.log.
EDIT: As mentioned in the comments, you could also use addEventListener to listen to contextmenu.
window.addEventListener('contextmenu', function(ev) {
ev.preventDefault();
console.log("right clicked");
});

You Can Use This Function to get right & left click event
But You Have To Use onmousedown instead using onclick
function myFunction() {
var rightclick;
if (!e) var e = window.event;
if (e.which) rightclick = (e.which == 3);
else if (e.button) rightclick = (e.button == 2);
isRclick = rightclick; // true or false
alert(isRclick);
}

Prevent middle mouse click in a href with jQuery

This may sound like a dumb question but just hear me out.
I'm trying to prevent a link from being clicked with the middle-mouse button. The UX reason I'm doing this, is because the anchor loads AJAX content, and the user don't know that until he clicks it.
Here's the problem:
/**
* mousedown or mouseup
*/
$(document).on("mousedown", function(e) {
if($(e.target).is("a.load-some-ajax-stuff") && e.which === 2) {
alert('Foo'); // only works if there's an alert
e.preventDefault();
}
});
/**
* click
*/
$(document).on("click", function(e) {
if($(e.target).is("a.load-some-ajax-stuff") && e.which === 2) {
e.preventDefault(); // should work, but doesn't catch middle-mouse clicks
}
});
Snippet
$(document).on('mousedown', "a.load-some-ajax-stuff", function(e) {
if( (e.which == 2) ) {
// alert('foo');
e.preventDefault();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I won't open a new tab when you middle click me
Edit
It seems that the Snippet above works in Safari, but not Chrome.

Detecting a shift + click with Jquery on Chrome

I'm trying to detect a shift click with javascript but for some reason it only works on IE
.click(function (e) {
if (e.shiftKey) {
Rain();
}
});
this is the code that work for me in IE, how can I detect it on Chrome

I don't think there is a defined combo, but you could make it yourself. A (crude) example:
<div id="someElement">
Click me for an alert!
</div>
<script>
var shiftPressed = false;
$(document).keydown(function(event) {
shiftPressed = event.keyCode==16;
});
$(document).keyup(function(event) {
if( event.keyCode==16 ){ shiftPressed = false; }
});
$('#someElement').on('click', function(e){
if( shiftPressed ){
alert("Shift and click!");
}
else{ alert("Nope"); }
});
</script>
You could improve it by only binding the .keyup() when the keydown is a shift in order to minimize the number of events. You should add as little logic as possible outside the if statements, as this event gets fired a lot

press 'Enter' key to invoke a function

In my page there is a button and a text box.
Originally I invoke a function by click the button. Now I also want to implement it by press Enter key as well. But it is not working. Press Enter key doesn't reach myFunction.
<script type="text/javascript">
$(document).ready(function () {
$("#txt1").keyup(function (event) {
if (event.keyCode == 13) {
$("#btn1").click(myFunction);
}
});
$('#btn1').click(myFunction);
});
function myFunction() {
// do something, press enter key doesn't reach here.
})
}
</script>

You are almost right: Just invoke the handler with .click() or .trigger('click')
$(document).ready(function () {
$("#txt1").keyup(function (event) {
if (event.which== 13) {
$("#btn1").click(); // Just do a click.
}
});
$('#btn1').click(myFunction); //Your handler is already registered here.
});
function myFunction() {
// do something, press enter key doesn't reach here.
}
Also use event.which instead of event.keyCode when inside jquery event handler as it normalizes event.keyCode and event.charCode.

Instead of
$("#btn1").click(myFunction);
I reccommend to use:
$("#btn1").on("click", function () {
myFunction();
});
And then:
if (event.keyCode == 13) {
$("#btn1").click(); //click the button
}
JSFIDDLE

Hiding a div on Mouse click out OR escape keyword press

I have the following code that hides my div (live search results) when mouse is clicked outside the div but I can't incorporate an OR function that does the same thing (hides div) when the escape key is pressed. Any help is much, much appreciated. Also, original code on mouse click out is from a different thread I got here on Stackoverflow. The or function is giving me a hard time.
var mouse_is_inside = false;
$(document).ready(function()
{
$('.form_content').hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").mouseup(function(){
if $('#display').hide();
});
});

This hides #display on pressing escape:
$(document).keyup(function(event) {
if(event.which === 27) {
$('#display').hide();
}
});
Example: http://jsfiddle.net/nsufH/
You could also try to use window instead of document:
$(window).keyup(function(event) {
if(event.which === 27) {
$('#display').hide();
}
});
Or try to use live:
$(document).live('keyup', function(event){
if(event.which === 27) {
$('#display').hide();
}
});

Basically you need to monitor for the KeyCode and act based off it:
$(document).keyup(function(e) {
if (e.keyCode == 27) { $('#display').hide() } // esc
});

$(document).ready(function() {
$(document).on('mouseup keyup', function(e){
var e = e || event,
code = (e.keyCode ? e.keyCode : e.which),
target = e.srcElement || e.target;
if (target.className != 'form_content' || code==27) {
$('#display').hide();
}
});
});

Here is the jsfiddle hiding a div on mouseout and ESC key press :
http://jsfiddle.net/jrm2k6/q2kNX/
Of course there is probably some stuff to do in the way to adapt it as your own source code..