Chrome right-click dialog swalllows mouse events - javascript

In Chrome the right-click dialog seems to swallow all mouse events. This means that you get mouse-down events without corresponding mouse-up events.
This includes every right-click, and any left-click where the right button is pressed before the left button is released (in which case you get two mouse-downs but no mouse-ups).
You can see the problem in action here (you may wish to mute your speakers) if you're curious.
I was just wondering if anyone knew of any workarounds for this? Using window.onmousedown instead of document.onmousedown doesn't fix the problem unfortunately.

You'll want to add a handler for the contextmenu event that cancels the opening of that menu.
See MDN for some details.
window.oncontextmenu = function(event) {
event.preventDefault();
event.stopPropagation();
return false;
};

Related

Javascript preventDefault() not working in Safari

I am working on an application using javascript and I want to get mouse events. To stop the options that appear when right clicking I use the preventDefault() function and it works in Firefox and Chrome but it doesn't work in Safari. This is my code:
document.querySelector("#GL-Surface").addEventListener("mousedown", function(e) {
e.preventDefault();
/* Handle mouse events */
});
From an other question I got that you should return false; but this still doesn't work. preventDefault() however works in Safari when it is used in keyboard inputs. So how can I prevent the default actions for mouse events in Safari?
To target right click events, use contextmenu rather than mousedown.
document.querySelector("#GL-Surface").addEventListener("contextmenu", function(e) {
e.preventDefault();
});
Note that the options that appear on right click do appear only when the right click button is released, so I don't think mousedown is at all suitable here.

dojo not trapping right-click event

In the code below, the right-click is not getting trapped. left-click works fine. This code was given in the dojo documentation. Can someone tell me why isRight is not working? Essentially, when I right-click the element, I just get the browser's right-click menu, no console message is generated.
https://dojotoolkit.org/reference-guide/1.10/dojo/mouse.html
on(myNode,'click',function(e) {
if (mouse.isLeft(e)){
console.log("left click", e);
} else if (mouse.isRight(e)){
console.log("right click",e);
}
});
The browser right click context menu consumes the click event. It will work if you use 'mousedown' instead of 'click'. There are also many questions about right click detection in javascript that you can look into for alternate methods. For example: Failing to identify right click event in Mozilla Firefox.
The dojo/mouse module is mostly a utility wrapper over the usual event handling, so the information in these questions still applies.
You cannot detect mouse.isRight when using event click. Instead you could use mousedown as in the following example:
https://jsfiddle.net/xgekrp5e/
require(["dojo/mouse", "dojo/on"], function(mouse, on) {
on(document, "mousedown", function(evt) {
if (mouse.isLeft(event)) {
// handle mouse left click
alert('MOUSE LEFT');
} else if (mouse.isRight(event)) {
// handle mouse right click
alert('MOUSE RIGHT');
}
});
});

Understanding consumeRollupEvent

I have an add-on, where when user holds down right mouse button, they can scroll the wheel and it will change tabs.
Now in Windows, if user pushes down on right button it doesn't open context menu. In linux it opens context menu on mouse down.
DOMMouseScroll event listner is on the chrome window ie: window.addEventListener('DOMMouseScroll', func, true)
So if you copy this code and paste it to scratchapd:
window.addEventListener('DOMMouseScroll', function() {
window.removeEventListener('DOMMouseScroll', arguments.callee, true);
console.log('scroll caught and removed')
}, true)
then go to the browser window, right click to open context menu, and scroll while mouse is over the context-menu, in windows, the scroll is caught. In linux it is not. (curious note here: mousedown events are caught if listener added on window and the click was in the context-menu).
I thought setting consume rollup event to no consume would solve it. But it's not.
Any ideas on how to fix this issue and does consumeRollupEvent have any affect here?
Currently i was setting consume rollup event to false in the popupshowing event of context-menu:
noConsume: function(event) {
if (event.target != document.getElementById('contentAreaContextMenu')) { return }
if (event.target.popupBoxObject) {
//event.target.popupBoxObject.setConsumeRollupEvent(Components.interfaces.nsIPopupBoxObject.ROLLUP_NO_CONSUME); //no longer support setConsumeRollupEvent
}
event.target.setAttribute('consumeoutsideclicks', false);
event.target.consumeoutsideclicks = false;
},
Right now I'm suspecting it's the DOMMouseScroll event that's not being caught, so i changed it to addEventListner('wheel'... and sent user test addon, waiting for his word back.
I don't think setConsumeRollupEvent will help you to intercept the scroll events. It refers to the rolling up of the context menu (i.e. the event that caused the context menu to close); nothing to do with mouse wheel rolling.
https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/setConsumeRollupEvent
It might be worth concentrating on why there is a difference in behaviour between Windows and Linux. It might be a Firefox bug or at the very least it might give you a clue about the best way to work around it. Maybe there is a way to prevent the context menu being invoked on MouseDown in Linux, it sounds like that would be the most desirable outcome for your add-on.

Can't use jquery's click event handler to detect right click

In trying to detect a right mouse click with jquery, I noticed that the click event handler doesn't seem to be fired off with a right mouse click, while the mousedown or mouseup event handler's do.
For example, after a right click on the test div, the following alerts 'testing!':
$('#test').mousedown(function(e) {
alert('testing');
});
However, the following does not:
$('#test').click(function(e) {
alert('testing!');
});
Does anyone know why?
When you mousedown, the even fired has event.which
Taken from here: How to distinguish between left and right mouse click with jQuery
$('#element').mousedown(function(event) {
switch (event.which) {
case 1:
alert('Left mouse button pressed');
break;
case 2:
alert('Middle mouse button pressed');
break;
case 3:
alert('Right mouse button pressed');
break;
default:
alert('You have a strange mouse');
}
});
So instead of using .click(), use mousedown and check for the cases.
As this article puts it:
There are no click events for right button clicks in any browser.
So you're left with mousedown and mouseup in most browsers.
Not sure which browser(s) you've tested with, but according to MSDN the onclick fires "when the user clicks the left mouse button". I.e., by definition it doesn't occur for right (or middle) clicks. Given that's on MSDN you can expect IE to behave that way regardless of what the other browsers do.
(Onclick also fires for certain non-mouse things, like changing certain form elements with the keyboard, etc.)
I know jQuery tries to normalise behaviour between browsers, but if the browser doesn't fire the event at all...
There is at least one jQuery plugin that I know of that implements right-click: http://abeautifulsite.net/blog/2008/05/jquery-right-click-plugin/ (I haven't used it, but it looks good except that it notes that Opera doesn't support it).
I have also tried the following code to catch right mouse click for certain class of elements
$(".brick").mousedown(function (event) {
if (event.which === 3) {
currentRightClickedTileID = $(this).attr("id");
}
});
This code doesn't always catch the right click.

How to trap "open in a new tab" clicks in jquery.click

I have a jquery script that attaches a click event to every link, running an action when the link is clicked. This has been working great, but I just got some betatester feedback that's foiling me.
The user was right-clicking on the link and opening it in a new tab. When she did this, jquery didn't trap the click. BAD USER. I reproduced this with cmd-click as well.
Is there a way to trap these gestures, or this an inherent limitation?
So you want to capture every click? Event the right or middle one? Shouldn't the mousedown event do just that?
Of course, she could right click a link just to "Copy Link Location"...
See if you can somehow make use of jQuery rightclick plugin:
http://abeautifulsite.net/notebook/68
Usage:
$(document).ready( function() {
// Capture right click
$("#selector").rightClick( function(e) {
// Do something
});
// Capture right mouse down
$("#selector").rightMouseDown( function(e) {
// Do something
});
// Capture right mouseup
$("#selector").rightMouseUp( function(e) {
// Do something
});
// Disable context menu on an element
$("#selector").noContext();
});
As for the cmd-clickie bit, I'm really not sure. In case it's helpful, here's the jQuery hotkeys plugin:
http://www.webappers.com/2008/07/31/bind-a-hot-key-combination-with-jquery-hotkeys/
I've seen jquery.rightclick.js code in firebug. There are modifiers with the mousedown and mouseup event like:
altKey
ctrlKey
so you can use these two modifiers:
if(evt.altKey || evt.ctrKey)
in jquery.rightclick.js

Categories