Develop Reference

Click with middle button can't load onclick function on Firefox

I'm already search a lot but still can't find the right answer.
I wonder why middle click (scroll button) can't load onclick function on Firefox only while on Chrome it works. So instead of onclick function it shows href link which is javascript:void(0)
<a href="javascript:void(0);" onclick="open_tab();">
Javascript
function open_tab(){
my_tab=window.open('http://www.google.com/', my_tab);
}
Tell my why. Thanks a lot.

I don't have a middle click on this computer to test this, but to make your middle click cross browser compliant, I would add a event listener in javascript:
var open = document.getElementById('opentab');
open.addEventListener ("click", function (e) {
if (e.which === 2) {
e.preventDefault();
open_tab();
}
});
This depends on adding an ID to your link like:
Open Tab
Also, correctly pointed out by espascarello, the mozilla community abandoned firing on click events on middle and right press: http://bugzilla.mozilla.org/show_bug.cgi?id=180078

To accomplish this for all browsers
I made it a bit simple
function open_tab(){
my_tab=window.open('http://www.google.com/', "Google");
}
var link = document.getElementById("alink");
link.addEventListener("mousedown", function(e) {
e.preventDefault();
if(e.which===1||e.which===2){
open_tab();
}
});
<a id="alink">Open Google</a>
The line
if(e.which===1||e.which===2){
Makes sure that the window opens only on left and middle mouse click.
It works fine for me!!!!!!!! Hope it helps!

e.preventDefault() & return false not working in firefox

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

Custom contextmenu won't work in Firefox on Mac

I have this custom contextmenu. It works perfect in every browser, except Firefox on Mac computers.
I have created it, so when the user right-click, the original menu will be hidden, after then, the custom menu, will be removed, if it already is shown (so only one menu will be shown at the time). And then finally, the menu will be created.
I also add another function, so that the menu also will be removed, if the user clicks anywhere else at the page.
As I said: This is only a problem in Firefox on Mac.
Here's my code:
var contextmenu = $('<div class="contextmenu">'
+ '<span class="row">First Row</span>'
+ '<span class="row">Second Row</span>'
+ '<span class="row">Third Row</span>'
+ '<span class="row about">Fourth Row</span>'
+'</div>');
// Show Contentmenu if user right-click anywhere
$(document).bind("contextmenu", function(event) {
event.preventDefault();
$('.contextmenu').remove();
contextmenu.appendTo("body").css({
top: event.pageY,
left: event.pageX
});
});
// Hide Contentmenu if user click anywhere
$(document).click(function() {
$('.contextmenu').remove();
});
I've also tried to use
$(document).bind("contextmenu", function() {...}); instead of $(document).click(function() {...}); but no difference here.
I really don't understand why this won't work in Firefox on Macs, when it works fine in Firefox on Windows and all the other browsers.
Fiddle Demo

I'm going to hope that your Firefox issue on Mac is the same Firefox issue that I'm getting using Firefox on Linux.
This piece of code:
$(document).click(function() {
$('.contextmenu').remove();
});
is actually hiding the contextmenu just after it appears, all in the same click. My contextmenus in Ubuntu appear on right click onmousedown instead of onclick like those on Windows, so the custom contextmenu is being created and then it is immediately being hidden once the mouse button is released and moved slightly.
Modifying it so that the contextmenu is instead hidden onmousedown fixes the issue for me on Firefox:
$(document).mousedown(function() {
$('.contextmenu').remove();
});
Hopefully that also fixes the issue for Firefox on Mac.

This worked for me :
$(document).on("mousedown", function(event){
if (!$(event.target).closest(".context-menu").length)
cmenu.hide();
});

onblur and link elements not working properly in Chrome - Fine in IE 10

I'm trying to achieve the following. Click on a link, display menu. As soon as that menu loses focus, clear the menu (also when menu item is clicked, remove the menu).
Here is my dumbed down code:
<a id="owner" href="javascript: doThis();" onblur="remove();">ClickOnMe</a>
function doThis() { console.log('clickedOnItem'); }
function remove() { console.log('removed'); }
I can't seem to get this to work. It works fine in IE10, but I can't get to work in Chrome.
Fiddle me this: http://jsfiddle.net/5t6wr/5/

For some reason chrome isn't registering your link as a focused item. What we have to do is force the link to be focused so chrome recognizes it.
Change your link to the following:
<a id="owner" href="javascript: document.getElementById('owner').focus(); doThis();" >ClickOnMe</a>
We added the focus to owner, then proceeded with your function to bring up the menu.
Inside your doThis function you will want to add the following:
document.activeElement.onblur = function() { remove(); };
That is going to take the current Active Element - and when focus is lost, run your script to close the window.
Note: You should put your remove function on a timeout, as you will be loading something from the menu, and don't want to have both trigger at the same time, it will cause a conflict.
Here is a fiddle to see the final version:
http://jsfiddle.net/5t6wr/4/

Calling $().focus on a textarea in Firefox doesn't work as expected

I've reproduced the problem here: http://jsfiddle.net/Rc52x/5/
If you click on Click here! while using Chrome, the textarea gains focus and you can start typing as expected.
If you click on it while using Firefox (I'm using 3.6.15 right now), the textarea does NOT gain focus and typing does nothing.
What the heck?

You need to prevent the default action of the link: http://jsfiddle.net/JAAulde/Rc52x/7/
Firefox is following it causing the textarea to lose focus after gaining.

This works:
$(document).ready(function () {
$("a#focus").click(function(e) {
$("#Body").focus();
return false;
});
});
return false prevents from navigating to "#..."