I am making an HTML 5 game which requires the use of right click to control the player.
I have been able to disable the right click context menu by doing:
<body oncontextmenu="return(false);">
Then it came to my attention that if you hold shift and right click, a context menu still opens in Firefox!
So I disabled that by adding this JS as well:
document.onclick = function(e) { if(e.button == 2 || e.button == 3) { e.preventDefault(); e.stopPropagation(); return(false); } };
However, if you hold shift, and then double right click in Firefox it still opens!
Please tell me how to disable this bloody thing once and for all (I'm even willing to revert to some obscure, hacky, and unpractical solution, as long as it works).
You will never be able to entirely disable the context menu in all cases, as firefox has a setting that allows the user to tell the browser to ignore such hijinx as you are trying to pull.
Note: I'm on a mac, but this setting is in pretty uch the same place over all platforms.
That being said, try event.preventDefault() (see Vikash Madhow's comment on this other SO question:
How to disable right-click context-menu in javascript)
There is actually example in official documentation that blocks directly context menu event:
document.oncontextmenu = function () { // Use document as opposed to window for IE8 compatibility
return false;
};
window.addEventListener('contextmenu', function (e) { // Not compatible with IE < 9
e.preventDefault();
}, false);
document.ondblclick = function(e) {
if(e.button == 2 || e.button == 3) {
e.preventDefault();
e.stopPropagation();
return(false);
}
};
Related
I do not want to disable right click. I want to make it visible to my app. When I right click the event never gets to my web app and is caught by the browser itself. I expect there is a simple way to tell Chrome or Safari to not do this and let the right-click get to the app itself. People have directed me to the way javascript uses the contextmenu feature. This is NOT what I need. The right click seems to be handled by Chrome itself and never gets to my app.
Not sure what "javascript contextmenu" meant, but this should do the job:
(Run snippet and right-click black box)
let testEl = document.getElementById('test');
testEl.addEventListener('contextmenu', function(e) {
if(e && e.preventDefault) e.preventDefault();
alert("Right click!");
});
#test {
width: 100px;
height: 100px;
background: black;
}
<div id="test"></div>
I highly doubt Chrome will prevent you from doing that. If it isn't working, it's very likely something within the app is interfering.
As mentioned in How can I capture the right-click event in JavaScript?, you can capture the right click event without dealing with contextmenu like this:
function rightclick() {
var rightclick;
var e = window.event;
if (e.which) rightclick = (e.which == 3);
else if (e.button) rightclick = (e.button == 2);
alert(rightclick); // true or false, you can trap right click here by if comparison
}
I have an image gallery with various controls. One of the controls is a basic delete function, to delete you click and hold for approx 1 second to get a confirmation asking if you want to delete. All works fine, it's just that on mobile devices it often causes the "Save Image As, etc" menu to pop up which has to be closed before the intended action can be performed.
I've read about various fixes but none of them seem to work with current versions of Chrome mobile on my Galaxy S5, and the most recent answer I could find was from 2013.
I found one saying that the context menu was it's own function, so I tried something like this:
window.oncontextmenu = function(event) {
event.preventDefault();
event.stopPropagation();
return false;
};
But it did not prevent the context menu from showing on my S5. As I said, I'm hoping to find a solution to prevent it from coming up on certain items, not the entire window.
Thanks to Tasos for the answer
document.getElementById('yourElement').oncontextmenu = function(event) {
event.preventDefault();
event.stopPropagation(); // not necessary in my case, could leave in case stopImmediateProp isn't available?
event.stopImmediatePropagation();
return false;
};
I (re)post the answer here because at first, I haven't seen it was in the question :)
So juste use this code, with stopImmediatePropagation :
document.getElementById('yourElement').oncontextmenu = function(event) {
event.preventDefault();
event.stopPropagation(); // not necessary in my case, could leave in case stopImmediateProp isn't available?
event.stopImmediatePropagation();
return false;
};
On some websites, you can right-click on a link and chose "open in a new tab" and it works fine, but not if one uses the middle mouse button to do so.
I encountered this a few times, it's it not too annoying but I'm still curious what causes this behaviour. (About the HOW)
Here is a site that behaves this way browsing with Chrome 46:
http://ebookfriendly.com/free-public-domain-books-sources/
the html link tags looks normal:
<a title="Feedbooks" href="http://www.feedbooks.com/">⇢ Feedbooks</a>
The cause must be something in the javascript. Any pointers?
One way to do this is using the auxclick event. (auxclick on MDN)
The following code will prevent the middle click behaviour on the entire page.
window.addEventListener("auxclick", (event) => {
if (event.button === 1) event.preventDefault();
});
Seems like this link has an event listener that uses preventDefault() and opens the page by other means.
Edit: hard to say why exactly they do this but when I look at the whole handler it seems that the link is being passed to google analytics:
function(e) {
var n = this.getAttribute("href"),
i = "string" == typeof this.getAttribute("target") ? this.getAttribute("target") : "";
ga("send", "event", "outbound", "click", n, {
hitCallback: t(n, i)
}, {
nonInteraction: 1
}), e.preventDefault()
}
You can ask which button caused the event and prevent the default behavior.
document.querySelector("a").addEventListener("click", function(e) {
if (e.which === 2) {
e.preventDefault();
}
}, false);
$(document).mousedown(function(e){
if(e.which == 2 ){
e.preventDefault();
alert("middle click");
return false;
}
});
works only if you keep the alert()
Chrome :
Following code is working in Chrome.
$('.links').click(function(e) {
if(e.which == 2) {
console.log(e.which); // prints 2
//e.preventDefault();
//e.stopPropagation();
return false;
}
});
Firefox :
Since above code doesn't catch middle button / mouse wheel click event in firefox, I tried following which is able to catch mouse wheel click event.
$('.links').mousedown(function(e) {
if(e.which == 2) {
console.log(e.which); // prints 2
//e.preventDefault();
//e.stopPropagation();
return false;
}
});
Above code prints 2. But return false; is not working.
When I replaced console.log with alert then it works. But I can't & don't want to use alerts.
I tried mouseup, mousewheel events also. But it didn't work.
I tried attachEvent also but, I got an error(attchEvent is not a function).
I am using below mentioned js files :
jQuery-1.10.2.min.js
jquery.easyui.min.js
jquery-ui.js
jquery.ui.core.js
You can refer below links for more clarity.
jsfiddle.net/nilamnaik1989/vntLyvd2/3
jsfiddle.net/nilamnaik1989/2Lq6mLdp
http://jsfiddle.net/nilamnaik1989/powjm7qf/
http://jsfiddle.net/nilamnaik1989/q6kLvL1p/
Following are some good links. But anyhow it doesn't solve my problem.
event.preventDefault() vs. return false
event.preventDefault() vs. return false (no jQuery)
http://www.markupjavascript.com/2013/10/event-bubbling-how-to-prevent-it.html
I need your valuable inputs.
All click default actions should be cancelable. That's one of the points of this important event. However, certain browsers have exceptions:
IE 5-8 won't prevent the default on text inputs and textareas.
IE9/10 & Opera incorrectly un-check radio buttons when you click on another radio in the same group. It correctly doesn't check the new radio.
IE 5-8, Firefox, & Opera won't prevent the default on select boxes.
Firefox & Chrome feel that one radio button must be checked. If all are unchecked they’ll check the first one you click on, even if the default is being prevented.
See Events - click, mousedown, mouseup, dblclick for some more information.
I had the same issue with firefox, related with
preventDefault();
Everything was working well in Safari, Chrome, Opera and even in IE9 (not kidding)
But, after a lot of reading, I saw that the site was using and old jquery version (1.10), then updated to the latest one (2.1.4) the action was canceled even in Firefox.
Another thing to consider is that I used a variable named "keyPressed" like:
var keyPressed = event.keyCode || event.which || event.charCode
So it was easy for each browser to recognize the key event.
Hope this help!
I have faced the similar problem in FF on middle click.
The following script fixed me the issue and it works fine in FF as well.
$(document).on('click', $(".content"), function(e) {
if(e.button==1) {
e.preventDefault();
return false;
}
})
I'm looking for a way to stop the middle mouse click from causing the browser to start scrolling, and showing the little scroll 'compass'.
I have seen Disabling middle click scrolling with javascript however the solution is a bit more hackey than I would like, and doesn't seem like something I could actually use.
I'm looking for a more definitive "This is how you do it" or "You cannot do that, son".
I am of course open to hacks and workarounds.
Just because S.O. questions look nicer with code, here is what I am using to close tooltips when right or middle clicking.
msg.mousedown(function(e) {
if (e.which == 2) { //middle mouse click
msg.hide();
e.preventScrolling(); //if only this worked...
}
else if (e.which == 3) { //right mouse click
msg.hide();
}
}).bind('contextmenu', function(e) {
e.preventDefault();
}).click(function(e) {
e.stopPropagation();
});
edit: jQuery, JavaScript, whatever, let's just all play nicely now :)
Edit 2:
I'm more interested in preventing the little scroll 'compass' than stopping the page from scrolling. I guess that wasn't very clear from my initial description.
Use:
$('body').mousedown(function(e){if(e.button==1)return false});
This works on Chrome: http://jsfiddle.net/PKpBN/3/
There's no need to include jQuery just for this.
If you are using jQuery, there are already some great answers here. If not, you can use vanilla JS:
document.body.onmousedown = function(e) { if (e.button === 1) return false; }
tested with the current version of firefox and chrome
document.body.onmousedown = function(e) {
if(e.button == 1) {
e.preventDefault();
return false;
}
}
Try using return false; instead of e.preventScrolling();
document.body.style.overflow=allowScroll?"":"hidden";
If you want to stop scrolling completely, here is the required code:
window.onscroll = function() {
document.body.scrollTop = 0;
}
This will effectively disable the middle button as well..