Develop Reference

How to disable mouse middle button click to open in a new tab or new window

I am trying to disable right and middle button of mouse so that it cant open new window or tab when click on any menu or hyperlink. Below javascript code works fine for right button but not working for middle button. Middle button of mouse gets captured but still new window or tab opens when click on hyperlink or menu.
<script type="text/javascript">
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = function () {
return false;
};
}
else {
document.onmouseup = function (e) {
if (e != null && e.type == "mouseup") {
if (e.which == 3) {
alert("Sorry..... Right click Is Disabled!!!!");
return false;
}
if(e.which===2)
{
e.preventDefault();
e.stopImmediatePropagation();
alert("Sorry..... Mouse Scroll click Is Disabled!!!!");
return false;
}
else if(e.button===4)
{
e.preventDefault();
e.stopImmediatePropagation();
alert("Sorry..... Mouse Scroll click Is Disabled!!!!");
return false;
}
}
};
}
Its not woking for firefox, chrome and IE.

try
document.onmousedown= function (e) {
if( e.which == 2 ) {
e.preventDefault();
alert("middle button");
}
}

According to MDN the auxclick event handles the "open link in new tab with middle mouse button" behaviour.
The following code will prevent the middle click behaviour on the entire page.
window.addEventListener("auxclick", (event) => {
if (event.button === 1) event.preventDefault();
});
If you want to disable it for a certain link only, just replace the event listener target (window) with a reference to the specific node.

Turn all right clicks on site into left clicks

I'm looking for a quick JavaScript fix:
Assume you are browsing a single webpage on a device with a mouse or trackpad (PC/Laptop) and I want following to happen.
When you right click the mouse:
Deactivate the right click. So no dropdown menu.
Turn the right click to a left click, e.g. I've clicked the right mouse button over an image or anchor, the site should handle it as if I've clicked with the left mouse button on this element.
This function should work on the whole website, on all elements.
Is there an easy way to fix this issue?
I've already tried this:
<script type="text/javascript">
function click (e) {
if (!e)
e = window.event;
if ((e.type && e.type == "contextmenu") || (e.button && e.button == 2) || (e.which && e.which == 3)) {
if (window.opera)
window.alert("Sorry, this function is deactivated.");
return false;
}
}
if (document.layers)
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = click;
document.oncontextmenu = click;
clickedOption.parentNode.selectedIndex = clickedOption.index;
</script>
This disables the function of the right mouse click but I can't get it to behave like a left mouse click.
Any solutions? What might be wrong?

This will force a left click on right clicks on the document, or any elements you click
document.addEventListener('contextmenu', function(e){
// Stop the context menu
e.preventDefault();
e.stopPropagation();
// Try to avoid document wide things, just elements
if(e.target.nodeName != 'HTML'){
e.target.click();
}
});
// Testing
document.addEventListener('click',function(e){
e.target.innerHTML = 'Caught';
});
<div>Right Click Me</div>
<span>Right Click Me</span>
To answer the comment to my answer ->
document.addEventListener('contextmenu', function(e){
// Stop the context menu
e.preventDefault();
e.stopPropagation();
});
// Testing
document.addEventListener('click',function(e){
e.target.innerHTML = 'Caught';
});
<div>I dont work on right clicks</div>

You could dispatch click event on document mousedown if right button is pressed:
$(document).on('mousedown contextmenu', function (e) {
if (e.button === 2) {
e.preventDefault();
var mclick = document.createEvent("MouseEvents");
mclick.initMouseEvent("click", false, true, window, 0, e.screenX, e.screenY, e.clientX, e.clientY, true, false, false, true, 0, null);
e.target.dispatchEvent(mclick);
}
});
-jsFiddle-
Not sure it will fit all your needs but i guess give you some ideas.

Try the following:
$("body").on("contextmenu", function(e){
e.preventDefault();
e.target.click();
});

how to unbind/prevent context menu by keyboard (key #93) with FF?

I want to prevent the default event on key #93 (select, between alt gr and ctrl right on AZERTY keyboard).
This key open context menu like right click.
I tried :
$(document).off('keydown');
$(document).off('keyup');
$(document).off('keypress');
$(document).on('keypress', function(e){
if(e.keyCode == 93)
{
e.preventDefault();
return false;
}
});
$(document).on('keyup', function(e){
if(e.keyCode == 93)
{
e.preventDefault();
return false;
}
});
$(document).on('keydown', function(e){
if(e.keyCode == 93)
{
e.preventDefault();
return false;
}
});
Nothing works... I have always the contextmenu.

After checking for a while, I've been headed to another question similar to this one, but with a very different matter.
In any case, since the problem is the context menu, you don't even need jQuery for such, and the solution (despite it WON'T always work in firefox because the user may set it to disable such) is this one:
document.oncontextmenu = function (e) {
e.preventDefault();
return false;
}
fiddle:
http://jsfiddle.net/0kkm1vq0/3/
Works on chrome as well, and you won't need to use the keyboard listeners.
Reference: How to disable right-click context-menu in javascript
(which is really the same as key #93).
** note that this will disable the right click too **.
EDIT:
Not sure if this is cross-browser (the UPDATED code below seems to be working for both chrome and firefox, didn't try IE and others though), but the event fired by key #97 seems to be identified as 1, while the click seems to be identified as key 3, so you can just:
(function($){
if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
$(document).on('keyup', function(e) {
e.which == 93 && e.preventDefault();
});
}
else {
document.oncontextmenu = function (e) {
e.which == 1 && e.preventDefault();
}
}
})(jQuery);
http://jsfiddle.net/0kkm1vq0/10/
To disable JUST the key and not the right click.

Is it possible to capture the scroll wheel click

I've just written some code, that when the user clicks on a link (I'm using jQuery's .click()), they get a modal popup telling them they're being redirected to a different site. This all works fine with a normal left click, however, clicking the link using the middle mouse button to open it in a different tab loads the page straight away rather than showing the modal. Ideally I'd like to show them the modal too, then after the timer finishes open it in a new tab for them.
Is it possible to capture this click too?

Try this, It will help
$("yourtag").on('mousedown', function(e) {
if( (e.which == 1) ) {
alert("left button");
}if( (e.which == 3) ) {
alert("right button");
}else if( (e.which == 2) ) {
alert("middle button");
}
e.preventDefault();
}).on('contextmenu', function(e){
e.preventDefault();
});

Yes it is possible through simple click event listener:
$("#element").bind('click', function(e) {
if( e.which == 2 ) {
e.preventDefault();
alert("middle button");
}
});
just for your information, e.which == 1 will fire for left click and 3 for right click.

Try this code,
$(document).on("mousedown", "a", function(e) {
if( e.which == 2 ) {
e.preventDefault();
//your code here
}
});

Refer this answer : Live demo
$("#foo").on('click', function (e) {
if (e.which == 2) {
e.preventDefault();
alert("middle button");
}
});
Ref

modal close button

I have a div which is in a class="modal", and I written a function in jQuery that closes this div when i press "esc" :
$(document).keypress(function (e) {
if (e.keyCode == 27) {
if ($('.modal:visible > .icon32').length) $('.modal:visible > .icon32')[0].click();
}
});
everything works perfect in firefox, but in chrome does not, what could cause this problem?

I have observed keypress have issues with IE as well. use keydown event instead.The keydown event happens when the key is pushed down. Immediately after that keypress event occurs. When you release key keyup event happens.
$(document).keydown(function (e) {
if (e.keyCode == 27) {
if ($('.modal:visible > .icon32').length) $('.modal:visible > .icon32')[0].click();
}
});