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();
});
Related
I am working on a large project and need to fix some accessibility issues.
These is a section which has been generated by https://www.atbar.org/ in a JS format I am not familiar with. The user clicks buttons to change font size, background colour and other html elements to assist them with reading content.
When you click on the buttons with your mouse they work fine. This is an example of how the buttons appear:
<li class=“access-button">
<a title="Decrease Text Size" id="block_accessibility_dec" tabindex=“0">A-</a>
</li>
If I focus my Chrome inspector on the link element I can see there is an event listening for my click:
This appears to trigger the change in font size. I found the code that triggers this click, it is in a JS format that I am not familiar with:
M.block_accessibility = {
init: function(Y, autoload_atbar, instance_id) {
this.defaultsize = M.block_accessibility.DEFAULT_FONTSIZE;
// This event triggers after clicking
Y.all('#block_accessibility_textresize a').on('click', function(e) {
if (!e.target.hasClass('disabled')) {
M.block_accessibility.changesize(e.target);
}
});
// This is the function it runs, it has many cases for all the different buttons.
changesize: function(button) {
Y = this.Y;
switch (button.get('id')) {
case "block_accessibility_dec":
Obviously this is just snippets of the code with comments I added.
What I require is the user to be able to change the font size using just tab and enter, so I added the following JQuery:
$("#block_accessibility_dec").keyup(function(event) {
if (event.keyCode === 13) {
$('#block_accessibility_textresize #block_accessibility_dec').click();
}
});
This is not triggering the change in font size. Yet when I click on the button it does? There is probably a really simple solution here but I've been stuck for ages. I tested the .click() on other elements on the screen and it works for them so the JS is definitely executing.
I have also tested:
$(this).click();
But to no avail.
Try to trigger the click event by the native way:
$('#block_accessibility_textresize #block_accessibility_dec')[0].click();
Source: I tried their demo page together with the chrome inspector and couldn't get the click working with JQuery.
But with the native click event it suddenly worked.
Unfortunately I can't really explain to you, why JQuery doesn't work here. Maybe something with their version (1.11)?
Replace your code with the following code and add the keyup event. This should work when you press the enter key.
Y.all('#block_accessibility_textresize a').on('click keyup', function(e) {
if (e.keyCode == 13 || e.keyCode ==9) {
if (!e.target.hasClass('disabled')) {
M.block_accessibility.changesize(e.target);
}
}
});
You should use the following Jquery:
$('#block_accessibility_textresize #block_accessibility_dec').trigger("click");
Please let me know if this doesn't work.
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!
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 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 have several click function on one page, all fire in IE, except for one. It also only happens in IE, Firefox and Chrome are just fine.
The website can be seen on here (It's the Footer that doesn't work, it should show a popup witha video): http://sealection.info/
$('#footer').click(function() {
event.preventDefault();
$('.splash').stop().delay(200).fadeIn('300');
$('.splashcontent').stop().delay(400).fadeIn('300');
$('.overlay').stop().fadeOut('300');
$('#vimeo_frame').attr('src', 'http://player.vimeo.com/video/22659728?title=0&byline=0&portrait=0&autoplay=1');
});
try this
$('#footer').click(function(event) {
event.preventDefault();
.....
You have exception there:
event.preventDefault();
event is not defined