So I am trying to work out the differences between
link.click()
and
var event = document.createEvent("MouseEvents");
event.initEvent("click", true, false);
link.dispatchEvent(event);
As far as I can tell these should be the same things (however working with my jsfiddle example of exporting a csv from a URI this is not the case as they perform differently from browser to browser)
Using .click() with firefox the popup to download the csv will not show (it will in chrome)
see example -> http://jsfiddle.net/a5E9m/23/
Where as using the Mouse events it will
see example -> http://jsfiddle.net/a5E9m/25/
I think that Firefox has restrictions around the click function on an <a> element. See here. Whereas when you wire up the mouse event yourself, you are manually adding the click wiring. Also, see here and here.
Also, as Boris Zbarsky pointed out in the comments, the <a> element does not have a click function on it in the spec.
Related
I have an issue with my Javascript not working in Firefox.
I'm fetching images for a page from external sources (IP cameras). Where I am unable to fetch an image, I want to serve my own placeholder image so I don't show the browser default broken image. The solution I have works perfectly in Chrome. However, in Firefox it is automatically loading the missing image - but if I refresh the page it then works perfectly.
The code is:
$(function () {
// Replace Broken Image
$('img').error(function(){
$(this).attr('src', 'https://www.evercam.io/img/error.png ');
});
});
Does any one know why this wouldn't work in Firefox?
Cheers,
Ciarán
it about event binding use on/live instead.
https://api.jquery.com/on/
basicly what happens is it only bind event to imgs already there for more check JS event delegate.
try $(document).on("error", "img", func...);
basically document can be anything (selector, or object) that is a parent of actually element that triggers the event. what happen is with the event bubbling parent click event also get triggered and in the event jquery checks the trigger has given selector.
Cheers.
I have an element and a link. I want mouse interaction with the first element to behave exactly like it was the link. This means that
left-clicking should navigate to the href
ctrl+clicking should open in a new foreground tab
middle-clicking should open in a new background tab
shift+clicking should open in a new window.
See this fiddle for an example with a table row.
This works perfectly in Chrome but not in Firefox. This question is similar but doesn't ask about the non-left-click behavior and also doesn't work in Firefox.
Note that the MouseEvent works fine in Firefox for left-clicking (and should be supported since MDN documents it) since you can see the console.log. By the way, you can't even catch middle-click click events, but you can listen for mouseup (or mousedown, but that would be silly).
It's possible to simulate the first two behaviors instead of just dispatching the event to the link and I don't care so much about the shift+click case, but middle-click doesn't work in Firefox.
Chrome browser has this weird functionality that when I drag a div, or image, it drags that item. For example, if you go to http://www.google.com you'll be able to drag that google image.
The thing is, it's messing with my javascript events. Is there a way, in javascript to disable this functionality for the chrome/safari browser?
The other answers suggesting .preventDefault() do not work for me in Chrome (v26). Had to set draggable='false' HTML5 attribute on the image. FWIW I'm using the threedubmedia drag jQuery plugin (actually the nifty newer jdragdrop reimplementation).
Calling
event.preventDefault();
in your event handler should disable that.
Reference
I had the same problem when I needed to create my own drag and drop functionality. I was using mousedown, mouseup, and mousemove events. I solved it by adding event.preventDefault(); as the first line in my mousedown event handler.
My browser (firefox) prevents any popup from loading, and loads links that open new windows in the current tab, unless I explicitly say I want the link to load on a new tab or window, with the appropriate shortcuts (for example, middle click on the link, or left click with ctrl pressed causes the link to open on a new tab, and shift + left click on a new window).
I would like to create a javascript function f() that runs some code (meant to create the link address) when the link is pressed, and then loads the link that has been created, without removing the user experience described above.
Right now what I have is something like <a href="javascript:void(0)" onclick="f()"/>, but middle click doesn't work (it instead loads the url javascript:void(0)) and neither do the other features described above.
Do you have any idea as how to solve my problem ?
Thanks.
have you tried window.open('url')?
see: http://www.javascript-coder.com/window-popup/javascript-window-open.phtml
Also, as far as I know, you can't control whether or not the browser opens in a new tab or new window. That is a browser setting that is different for every user.
You might also try removing the onclick, and using
EDIT
There seems to be issues with using middle click with opening new tabs instead of executing the javascript: middle click (new tabs) and javascript links
As that site says, you can instead create an id for the element and bind it through javascript.
**Taken from that link:
...
And then in your JS, hook the link via it's ID to do the AJAX call.
Remember that you need to stop the click event from bubbling up. Most
frameworks have an event killer built in that you can call (just look
at its Event class).
Here's the event handling and event-killer in jquery:
$("#thisLink").click(function(ev, ob) {
alert("thisLink was clicked");
ev.stopPropagation();
});
Without jQuery, it might look like this:
document.getElementById('thisLink').onclick = function(e)
{
//do someting
e.stopPropagation();
}
Other browsers may vary, but by default Firefox doesn't tell the web page that it has been middle-clicked (unless you set the hidden preference to enable the feature). You might be able to create a workaround based on the focus and/or mouseover events instead.
I am working on a web app in which I want to have a different action happen to an element whether I left or right click on it.
So I first added a function to handle the click event with jQuery, and then added a second function to handle the oncontextmenu attribute of my element.
This is working well in Chrome & IE but causes a problem in Firefox: When I right click on an element, my function that handles the left click is surprisingly called, and then my function that handles the right click is called.
How can I make Firefox not call the left-click function when I right click?
Yeah, browsers traditionally send right-clicks to the onclick handler, with the event.which property set to 3 instead of 1. IE used oncontextmenu instead, then Firefox picked up oncontextmenu in addition to the usual onclick. To cater for the browsers you will have to catch both events — or find a plugin that will do it for you.
Note that even with this sorted out, you are still not guaranteed to get right click events or be able to disable the standard context menu. Because many web pages abused the ability, it is disablable in many browsers, and sometimes disabled by default (eg. in Opera). If your app provides right-click actions, always ensure there is an alternative way to bring them up.
My problem came from the fact that on one side I was using the insanely great jQuery live function for click and the oncontextmenu attribute on the other. (Using onclick and oncontextmenu was not a problem).
I've just modified my $.live("click"...) function by catching the event and not firing the rest when e.which is 3.
Problem solved!