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
}
Related
This webpage has a simple event listener, when I right click it blocks opening the context menu. simple enough.
But when I refresh the page or on initial load of the page, if I start with right mouse clicking the page, it shows the context menu, then blocks it ever time I right mouse click after that. I tried it in Chrome, FireFox and IE. Same results.
I experience the same thing with mouse down, keydown, or touch events, etc. It is like the first click is ignored. I am looking for JavaScript solution (not jquery). What am I missing?
<html>
<head>
<title>test</title>
<script type="text/javascript">
window.onload = function () {
window.addEventListener("contextmenu", mouseright);
}
function mouseright() {
document.oncontextmenu = function(e) {
var e = e || window.event;
alert("right");
e.preventDefault();
}
}
</script>
</head>
<body>
hello world
</body>
</html>
I even tried adding this before the event listener (as in this post keydown not detected until window is clicked), had no luck with document.onload and did see that it could be a possible browser focus on page load setting. Any thoughts or other ideas I didn't try in JavaScript?
if (document.hasFocus() == true) {
} else {
window.focus();
}
You're unnecessarily assigning the event twice (as both window.contextmenu and document.oncontextmenu). Removing the extra wrapper seems to work:
window.onload = function () {
window.addEventListener("contextmenu", mouseright);
}
function mouseright(e) {
var e = e || window.event;
alert("right");
e.preventDefault();
}
(The window.onload may also be unneeded, depending on where you place the addEventListener in the document.)
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()
I'm catching the contextmenu event using jQuery like this:
$(document.body).on("contextmenu", function(e){
//do stuff here
});
So far, so good. Now I want to execute some code when it closes but I can't seem to find a correct solution for this.
Using something like the following would catch some of the cases, but not nearly all:
$(document.body).on("contextmenu click", function(e){});
It wouldn't be executed when:
the browser loses focus
an option in the contextmenu is chosen
the user clicks anywhere in the browser that's not on the page
note: I'm not using a jQuery context menu, I'm just using it to catch the event.
Following code may help you. jsfiddle
var isIntextMenuOpen ;
$(document).on("contextmenu", function(e){
isIntextMenuOpen = true;
});
function hideContextmenu(e){
if(isIntextMenuOpen ){
console.log("contextmenu closed ");
}
isIntextMenuOpen = false;
}
$(window).blur(hideContextmenu);
$(document).click(hideContextmenu);
I needed to detect when a context menu closes and so I came up with a solution.
Fiddle: https://jsfiddle.net/kexp0nmd/1/
var premenuelem;
var TempContextMenuCloseHandler = function(e) {
console.log('closed!');
//console.log(e);
window.removeEventListener('keyup', TempContextMenuCloseHandler, true);
window.removeEventListener('mousedown', TempContextMenuCloseHandler, true);
window.removeEventListener('focus', TempContextMenuCloseHandler, true);
var focuselem = document.getElementById('tempfocus');
if (focuselem === document.activeElement) premenuelem.focus();
focuselem.style.display = 'none';
};
var TempContextMenuHandler = function(e) {
console.log('open!');
//console.log(e);
premenuelem = document.activeElement;
var focuselem = document.getElementById('tempfocus');
focuselem.style.display = 'block';
focuselem.focus();
window.addEventListener('keyup', TempContextMenuCloseHandler, true);
window.addEventListener('mousedown', TempContextMenuCloseHandler, true);
window.addEventListener('focus', TempContextMenuCloseHandler, true);
};
window.addEventListener('contextmenu', TempContextMenuHandler, true);
html, body { min-height: 100%; }
<textarea></textarea>
<div id="tempfocus" tabIndex="-1" style="left: 0; bottom: 0; height: 50px; width: 100%; background-color: #CCCCCC; display: none; position: fixed; outline: none;"></div>
Tested and verified working as of May 2020 on Edge, Firefox 76, and Chrome 80 for both mouse and keyboard. Mobile/touch support unknown.
The key aspect of this solution is using an element that has a tabIndex on it. By showing and moving focus to that element (focus stealing) before the context menu appears causes Edge and Chrome to send a focus change event when the user later closes the context menu. I made the background of the div gray so it could be seen - in production, make it a transparent background and style it up however you want.
The keyup handler catches the release of the Escape/Enter key for when the keyboard closes the context menu. The mousedown handler catches mousedown events in Firefox only.
As far as I can tell, there is no way to know for certain what option a user selected or even if they did, in fact, select an option. At the very least, it allows for consistent detection of context menu open/close across all major browsers.
The textarea in the example is just there to give something else to play with for focus handling.
While this solution involves temporary focus stealing, it is the cleanest, cross-browser solution until browser vendors and the W3C add an 'exitcontextmenu' event or some such to the DOM.
One minor bug I just ran into: Showing the context menu and switching away to another application closes the context menu but does not fire the closed event right away. However, upon switching back to the web browser, the event fires and the close handler runs. Adding a 'blur' capture to the window might solve that but then I'd have to re-test everything and it might break something (e.g. fire blur on opening the context menu). Not worth fixing for the extremely rare occasion this might happen AND the handler still fires - it's just visibly delayed.
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);
}
};
I have a boxee html application. I can handle all navigation keys on the remote control, except the big back/menu button. This one closes the app - I would like to use it to bring up my app menu instead.
Is there a way to prevent default behavior on this key?
you can trigger your back/menu button since the last api update from boxee. in your js-file where you set your keyboard mode you can catch your back button with:
boxee.onKeyboardKeyBack = function(){
browser.execute( "callYourShowMenuFunction()" );
}
browser.execute() delegates that to your htmlbrowser. now your backbutton should trigger your function in javascript!
remember back button usually should close the app, so don t forget to give your user an logout option ;) otherwise your app won t be published!
Backspace handling
document.body.onkeypress = function (e) {
if (!e)
var e = window.event;
/*backspace*/
if(e.keyCode == 4){
e.preventDefault();
/*Do your thing*/
}
}
On right click
document.onmousedown = function(e) {
if (!e)
var e = window.event;
/*right mouse*/
if (e.which == 3){
e.preventDefault();
/*Do your thing*/
}
}
Good article on similar event management http://www.quirksmode.org/js/events_properties.html
Edit: I'd recommend localising the onmousedown to the objects which you want to trigger the event on.