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.
Related
I wrote the below code for disabling the scroll in the mouse while it is clicked.
but my code does not work an when I click with the scroll of my mouse it opens my link.
Here is my code :
$('a').on('mousedown', function(e) {
if (e.which === 2) {
console.log('Disabled');
return false;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
click here
You have to use auxclick in order to disable this feature. Replace your 'click' with 'auxclick', and add e.preventDefault(), it will work, tested in chrome and FF
$('a').on('auxclick', function(e) {
if (e.which === 2) {
e.preventDefault();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
click here
You can use event.preventDefault() to cancel a action
document.onmousedown= function (e) {
if( e.which == 2 ) {
e.preventDefault();
alert("middle button pressed, dont open");
}
}
click here
try the code below, thanks :
click here
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js">
</script>
<script>
var el = document.getElementById('link_click');
el.onmousedown = mouse_down;
function mouse_down() {
alert('mouse_down() called');
return false;
}
</script>
I was asked to implement ctrl+mousewheel event for our page site in order to change image offset on user zoom in or zoom out. I found this old answer Override browsers CTRL+(WHEEL)SCROLL with javascript and I`ve tried to do the same.
I downloaded the jQuery Mouse Wheel Plugin for the implementation and here is my code:
var isCtrl = false;
$(document).on('keydown keyup', function(e) {
if (e.which === 17) {
isCtrl = e.type === 'keydown' ? true : false;
}
}).on('mousewheel', function(e, delta) { // `delta` will be the distance that the page would have scrolled;
// might be useful for increasing the SVG size, might not
if (isCtrl) {
e.preventDefault();
alert('wheel');
}
});
The events works fine separately, but if I hold the CTRL button and wheel the mouse the wheel event does not fire.
Does any one have better solution for this or may be I did something wrong?
Fiddle, In order for it to work you have to click in the result box first before trying.
$(window).bind('mousewheel DOMMouseScroll', function(event)
{
if(event.ctrlKey == true)
{
event.preventDefault();
if(event.originalEvent.detail > 0) {
console.log('Down');
}else {
console.log('Up');
}
}
});
To check if the ctrl key is clicked, the event already provides a way to do that. Try this:
.on('mousewheel', function(e) {
if (e.ctrlKey) {
e.preventDefault();
alert('wheel');
}
});
This also works for e.shiftKey, e.altKey etc. I would only listen for the scroll event and there I would check if the ctrlKey is down.
This can be achieved with the wheel event, which is the standard wheel event interface to use.
document.getElementById('id_of_element')
.addEventListener('wheel', (e) => {
if(e.ctrlKey)
alert("Control + mouse wheel detected!");
})
I want to open link in new tab with middle mouse button, but I find out that event.preventDefault() stops middle-click from opening a new tab.
I have to use event.preventDefault() because my link is used for trigger a lightbox, but I want user to be able to open this link in new tab with middle mouse button too, how can I do that?
Demo
document.getElementById("test").addEventListener("click", function(e) {
e.preventDefault();
});
<a id="test" target="_blank" href="//jsbin.com/wemowe">Click</a>
You can make it conditional so it doesn't prevent the middle mouse button, which is 2
document.getElementById("test").addEventListener("click", function(e) {
if ( e.which !== 2 )
e.preventDefault();
});
A somewhat more cross browser solution supporting older IE as well would be
document.getElementById("test").addEventListener("click", function(e) {
var evt = (e == null ? event : e), prevented = true;
if (evt.which) {
if (evt.which == 2) prevented = false;
} else if (evt.button) {
if (evt.button == 4) prevented = false;
}
if (prevented) evt.preventDefault();
});
I am working on a project in which i need to do some custom development. and one of them is i have to display an popup when user closed the PARTICULAR TAB. I already try some solutions but it is not working as i want. either it is working on whole browser or not at all working. So how do I achieve prompt when user close any particular tab.
Solution i had try that is
Solution i tried
var validNavigation = false;
function wireUpEvents() {
/**
* For a list of events that triggers onbeforeunload on IE
* check http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx
*
* onbeforeunload for IE and chrome
* check http://stackoverflow.com/questions/1802930/setting-onbeforeunload-on-body-element-in-chrome-and-ie-using-jquery
*/
var dont_confirm_leave = 0; //set dont_confirm_leave to 1 when you want the user to be able to leave withou confirmation
var leave_message = 'You sure you want to leave?'
function goodbye(e) {
if (!validNavigation) {
if (dont_confirm_leave!==1) {
if(!e) e = window.event;
//e.cancelBubble is supported by IE - this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = leave_message;
//e.stopPropagation works in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
//return works for Chrome and Safari
return leave_message;
}
}
}
window.onbeforeunload=goodbye;
// Attach the event keypress to exclude the F5 refresh
$(document).bind('keypress', function(e) {
if (e.keyCode == 116){
validNavigation = true;
}
});
// Attach the event click for all links in the page
$("a").bind("click", function() {
validNavigation = true;
});
// Attach the event submit for all forms in the page
$("form").bind("submit", function() {
validNavigation = true;
});
// Attach the event click for all inputs in the page
$("input[type=submit]").bind("click", function() {
validNavigation = true;
});
}
// Wire up the events as soon as the DOM tree is ready
$(document).ready(function() {
wireUpEvents();
});
This is probably a question motivated more by concern for privacy than the potential for applicability, but is there a way to create an event handler that picks up the event of the user right clicking and selecting "inspect element" in Chrome or Firefox?
If there's not clear answer for this, is there a way to handle events for right click menu selections?
a fiddle I put together, you can get all the information on the element that the mousedown
event was on
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
}, false);
document.addEventListener("mousedown", function(e) {
console.log(e); // you can inspect the click event
$this = $('.cmenu');
if (e.which === 3){ // right click = 3, left click = 1
$this.addClass('open');
$this.css({
'left': e.pageX - $this.width() / 2,
'top': e.pageY - $this.height()
});
}else if(e.which === 1 && e.target.nodeName == "HTML"){
$this.removeClass('open');
}
});
http://jsfiddle.net/MKBdv/1/
You can listen to event click, add check whether it is right click:
document.addEventListener("mousedown", function(e) {
console.log(e); // you can inspect the click event
if (e.which === 3) { // right click = 3, left click = 1
alert("right click");
}
});
// prevent context menu show up
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
}, false);