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.

Correct way to prevent triggering `click` if inner element is not hovered when mouse is released

I need to prevent hiding of a modal dialog when user clicks on the dialog, then moves the mouse outside of the dialog, and releases it. The dialog is placed inside outer div on which the click event is registered. Here is the example of the modal dialog and its setup.
So I've done the following:
var pointerDownElement = null;
$('.d1').on('mousedown', function(event) {
// this is how I do it to prevent triggering of click event
pointerDownElement = event.target;
// this is how a browser does it
pointerDownElement = event.currentTarget;
});
$('.d1').on('mouseup', function(event) {
var element = event.target;
if (element === pointerDownElement) {
console.log('triggering click');
}
});
Is this approach correct?

You're definitely on the right track. Slightly modified code:
var pointerDownElement = null;
$('.d1').on('mousedown', function(event) {
event.preventDefault();
pointerDownElement = event.currentTarget;
return false;
});
$('.d1').on('mouseup', function(event) {
if (event.target=== pointerDownElement) {
console.log('triggering click');
}
});
No need to assign a value to a variable if you're only going to use it once. Also, event.preventDefault(); and return false; will guarantee the default behavior of the event doesn't take place (not that there typically is one for mousedown, but I'm assuming you have a reason for including this code).

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();
});

Canceling a custom drag function when mouse slides off div

I have a draggable function in jquery to make it so I can drag and move elements on a div. Sometimes, when dragging the mouse comes off the div and I am not able to put back down the element.
I'm trying to add a keydown event for the escape button or something so that when pressed, the same thing happens on .on("mouseup", function(event) {
I've tried doing .on("mouseup keydown", function(event) { but it doesn't catch any keys that are being pressed.
Does anyone have any ideas on how I can cancel the drag? Either by a keydown or even on a mouseup regardless of if the mouse is on the div or not that is being dragged?
Just to be clear, the problem I am having is sometimes I will be dragging the element, I will mouseup but the mouse wasn't on the element when mouseup was called. Therefore, the element is still dragging and I no longer have my finger on the mouse and I have no way to stop the element from dragging to get it back on the document.
EDIT: Here is a jsfiddle, notice I am trying to get this to work on a scaled container. youtube video showing drag glitch
(function($) {
$.fn.drags = function(opt, callback) {
opt = $.extend({
handle: "",
cursor: "move"
}, opt);
if (opt.handle === "") {
var $el = this;
} else {
var $el = this.find(opt.handle);
}
return $el.css('cursor', opt.cursor).on("mousedown", function(e) {
if (opt.handle === "") {
var $drag = $(this).addClass('draggable');
} else {
var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
}
var z_idx = $drag.css('z-index'),
drg_h = $drag.outerHeight(),
drg_w = $drag.outerWidth(),
pos_y = $drag.offset().top + drg_h - e.pageY,
pos_x = $drag.offset().left + drg_w - e.pageX;
$drag.css('z-index', 1000).parents().on("mousemove", function(e) {
$('.draggable').offset({
top: e.pageY + pos_y - drg_h,
left: e.pageX + pos_x - drg_w
}).on("mouseup", function() {
$(this).removeClass('draggable').css('z-index', z_idx);
});
});
e.preventDefault();
}).on("mouseup", function(event) {
if (opt.handle === "") {
$(this).removeClass('draggable');
} else {
$(this).removeClass('active-handle').parent().removeClass('draggable');
}
if (typeof callback == 'function') {
alert("this is a callback");
}
});
}
})(jQuery);

Here are a few things that might work:
Instead of listening for mouseup on the target element, listen for it on document.body. That way it will fire regardless of if the cursor is over the dragged element.
If you want to cancel the drag when the cursor wanders out of the page, add an event listener for mouseleave on document.body and use it to cancel the drag.
If you make a code-pen (or similar) test case, I will be happy to dig into the code.
Edit__
Handling mouseleave on the document prevents it from getting stuck in a draggable state. It also fixes the multiplied movement that you were seeing.
$(document.body).on('mouseleave', function(){
$el.removeClass('draggable').css('z-index', z_idx);
});
Edit2__
Previous JSFiddle was incorrect.
https://jsfiddle.net/spk4523t/6/

Prevent a click handler from firing when an inner div is clicked

I believe my question is the reverse of this one: Prevent execution of parent event handler
I'm building a UI in Google Apps Script. I have a select box, inside a larger container div. I want to be able to run an animation using jQuery when the parent div is clicked, but I don't want the animation to run when the select box is clicked. I tried using stopPropagation, but that's not helping. Currently the animation runs when either the div itself, or the select drop-down is clicked:
var ISDOWN = true; //global to track whether div is down or up
$("#outer-container").click(
function(e) {
e.stopPropagation();
var source = $(this).attr('id');
if (source === "outer-container"){
if (ISDOWN === true){
$("#outer-container").animate({top: "8px"});
ISDOWN = false;
}
else {
$("#outer-container").animate({top: "45px"});
ISDOWN = true;
}
}
});

You can check the element being clicked from the target property on the event object
if ($(e.target).attr('id') === 'outer-container') {
if (ISDOWN === true){
$("#outer-container").animate({top: "8px"});
ISDOWN = false;
}
else {
$("#outer-container").animate({top: "45px"});
ISDOWN = true;
}
}