Develop Reference

Dealing with click event handler on inner div and outer div

I've got modal window: parent div (wrapper with dark transparent background) and child div (with buttons, inputs and text). Both of them are fixed positioning.
In JavaScript I do simple code: If I click on parent fixed div (.modal-wrapper) - it must close (remove) whole modal window. And same result if I click on close button ('X' button in the corner of modal window).
Here is my simple JS code:
function doModalClose() {
modalWrapper.remove();
}
closeBtn.addEventListener('click', doModalClose);
modalWrapper.addEventListener('click', doModalClose);
And html markup:
<div class="modal-wrapper">
<div class="modal-window">
<div class="btn-wrapper"><span class="close-btn"></span></div>
other modal elements...
</div>
</div>
The main question is that when I click on parent div it works correctly, and as when I click on .close-btn. But if I clicked on child div (.modal-window) it closes whole modal too, which incorrect!
I make a simple alert(); check: when I click on parent one it should say Modal Wrapper and when I click on child one it should say Modal Window.
And when I click on child window it calls two alert(); functions: first is child's Modal Window and after that parent's Modal Wrapper.
So that's the reason of my issue, but I don't understand the reason of that kind of behavior. I use on child div z-index: 2; and z-index: 1; on parent div, but it still doesn't help.
Thank you for your attention!

This happens because one is inside another one, if you click the inner div you also click the outer one because the inner is inside the outer one. You need an extra handler just for .modal-window and to use event.stopPropagation(). Run this code snippet and see by yourself.
function doModalClose() {
modalWrapper.remove();
}
var closeBtn = document.getElementsByClassName('close-btn')[0]
var modalWrapper = document.getElementsByClassName('modal-wrapper')[0]
var modalWindow = document.getElementsByClassName('modal-window')[0]
var button1 = document.getElementsByClassName('button1')[0]
var button2 = document.getElementsByClassName('button2')[0]
closeBtn.addEventListener('click', doModalClose);
modalWrapper.addEventListener('click', doModalClose);
modalWindow.addEventListener('click', function (event) {
event.stopPropagation()
})
button1.addEventListener('click', function (event) {
alert('button1')
})
button2.addEventListener('click', function (event) {
alert('button2')
})
div {margin: 5px; padding: 5px}
.modal-wrapper {border: 2px solid red}
.modal-window {border: 2px solid blue}
.btn-wrapper, .btn {border: 2px solid green}
<div class="modal-wrapper">modal-wrapper
<div class="modal-window">modal-window
<div class="btn-wrapper"><span class="close-btn">button</span></div>
<a class="btn button1">Button1</a>
<a class="btn button2">Button2</a>
</div>
</div>

Stop propogation of event listener click but still allow other click events to occur within the element

I have created a fairly classic modal. Fixed modal in the middle of the screen. Semi-transparent background and a box in the middle.
The box contains some click event listeners (e.g a close X and a button that performs another action).
I want to allow the user to close the modal by clicking on the outer background.
HTML example
<div class="modal">
<div class="modal__inner">
<div class="modal_closebtn">X</div>
</div>
</div>
Currently, I have the following to handle closing the modal based on click of .modal, which covers the whole screen.
document.querySelector(".modal").addEventListener("click", () => {
this.toggleModal();
});
My problem is, this fires if you click inside the .modal__inner too.
So I tried adding an eventListener to stopPropagation()
document.querySelector(".modal__inner").addEventListener("click", e => {
e.stopPropagation();
});
This now blocks the eventListener for my .modal_closebtn and any other events that occur inside the modal.
How can I ensure that the click for the background div only works on the modal div not modal__inner or any others? Unfortunately when I review e.currentTarget after clicking inside my div it returns .modal not .modal__inner even though it does appear that I clicked inside that div.
Non jQuery solution please

To avoid the execution of querySelector too many times and gain a little of performance, store that result into a variable.
var elem = document.querySelector(".modal")
elem.addEventListener("click", (e) => {
if (e.target !== elem) return;
console.log('toggle!');
//this.toggleModal();
});
.modal {
width: 300px
height: 300px;
border: 1px solid #000
}
.modal__inner {
width: 100px
height: 100px;
border: 1px solid red
}
<div id="hola" class="modal">
Parent modal
<br>
<br>
<br>
<div id="epale" class="modal__inner">
Inner modal
<div class="modal_closebtn">X</div>
</div>
</div>
Happy coding!

The event object has the original target of the event, use that to figure out what is the source of the event.
var modal = document.querySelector(".modal");
modal.addEventListener("click", (e) => {
if (e.target !== modal) return;
this.toggleModal();
});

jquery - How to determine if a div changes its height or any css attribute?

How can I trigger an event when a div changes its height or any css attribute?
I have a div with id = mainContent. I want jquery to automatically trigger an event when it changes its height. I did something like this:
$("#mainContent").change('height', function() {
$("#separator").css('height', $("#mainContent").height());
});
I know its wrong.
Here's my whole code (I pasted all of it because I can't get into jsfiddle for some reason I don't know):
$(document).ready(function() {
$("#separator").css('height', $("body").height());
});
$(function() {
$("#btnSample1").click(function() {
$("#mainContent").css('height', '400px');
$("#mainContent").css('width', '600px');
$("#mainContent").css('background-color', '#F0F0F0');
});
$("#btnSample2").click(function() {
$("#mainContent").css('height', '1600px');
$("#mainContent").css('width', '700px');
$("#mainContent").css('background-color', '#F0F0F0');
});
$("#mainContent").change('height', function() {
$("#separator").css('height', $("#mainContent").height());
});
});
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#separator {
border-right: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width: 100%;">
<tr>
<td valign="top" style="width: 19%;">
<table id="mainMenu">
<tr><td><input id="btnSample1" type="button" value="Sample 1" /></td></tr>
<tr><td><input id="btnSample2" type="button" value="Sample 2" /></td></tr>
</table>
</td>
<td valign="top" style="width: 1%;" >
<div id="separator"></div>
</td>
<td valign="top" style="width: 80%;">
<div id="mainContent"></div>
</td>
</tr>
</table>
I am trying to adjust the height of the div id=separator based on the height of mainContent whenever the height of mainContent changes.
PS: In this case I know I can use the button event to do this but I want the div to trigger the event when the height is changed.

First, There is no such css-changes event out of the box, but you can create one by your own, as onchange is for :input elements only. not for css changes.
There are two ways to track css changes.
Examine the DOM element for css changes every x time(500 milliseconds in the example).
Trigger an event when you change the element css.
Use the DOMAttrModified mutation event. But it's deprecated, so I'll skip on it.
First way:
var $element = $("#elementId");
var lastHeight = $("#elementId").css('height');
function checkForChanges()
{
if ($element.css('height') != lastHeight)
{
alert('xxx');
lastHeight = $element.css('height');
}
setTimeout(checkForChanges, 500);
}
Second way:
$('#mainContent').bind('heightChange', function(){
alert('xxx');
});
$("#btnSample1").click(function() {
$("#mainContent").css('height', '400px');
$("#mainContent").trigger('heightChange'); //<====
...
});
If you control the css changes, the second option is a lot more elegant and efficient way of doing it.
Documentations:
bind: Description: Attach a handler to an event for the elements.
trigger: Description: Execute all handlers and behaviors attached to the matched elements for the given event type.

Please don't use techniques described in other answers here. They are either not working with css3 animations size changes, floating layout changes or changes that don't come from jQuery land. You can use a resize-detector, a event-based approach, that doesn't waste your CPU time.
https://github.com/marcj/css-element-queries
It contains a ResizeSensor class you can use for that purpose.
new ResizeSensor(jQuery('#mainContent'), function(){
console.log('main content dimension changed');
});
Disclaimer: I wrote this library

For future sake I'll post this. If you do not need to support < IE11 then you should use MutationObserver.
Here is a link to the caniuse js MutationObserver
Simple usage with powerful results.
var observer = new MutationObserver(function (mutations) {
//your action here
});
//set up your configuration
//this will watch to see if you insert or remove any children
var config = { subtree: true, childList: true };
//start observing
observer.observe(elementTarget, config);
When you don't need to observe any longer just disconnect.
observer.disconnect();
Check out the MDN documentation for more information

Another simple example.
For this sample we can use 100x100 DIV-box:
<div id="box" style="width: 100px; height: 100px; border: solid 1px red;">
// Red box contents here...
</div>
And small jQuery trick:
<script type="text/javascript">
jQuery("#box").bind("resize", function() {
alert("Box was resized from 100x100 to 200x200");
});
jQuery("#box").width(200).height(200).trigger("resize");
</script>
Steps:
We created DIV block element for resizing operatios
Add simple JavaScript code with:
jQuery bind
jQuery resizer with trigger action "resize" - trigger is most important thing in my example
After resize you can check the browser alert information
That's all. ;-)

As far as regards the height or any other dimension parameter, you can use the ResizeObserver interface.
First, you get your HTML element:
const divElem = document.querySelector('#mainContent');
The element type is not restricted to DIVs, it can be anything.
Then, you create an instance of the ResizeObserver interface:
let myObserver = new ResizeObserver(entries => {
console.log("Height changed. New height: "+$("#mainContent").height());
});
Finally, you call the observe() method, which starts the specified element:
myObserver.observe(divElem);
Each time the element will be resized, the observe() method will be triggered.
Please note: the ResizeObserver interface does not work with Internet Explorer.
Other valuable answers are here:
How to detect DIV's dimension changed?

How to highlight text and image in different divs on mouseover

I would like to achieve the same effect found on the following website:
http://www.kpf.com/projectlist.asp?T=4
On mouseover of an image, the corresponding text highlights and vice versa.
I've found a JavaScript solution on a forum. I've copy-pasted the solution below:
div code
<div style="width:400;height:500;" onmouseover="hightlight()" onmouseout="removehightlight()"><span id="textspan" >This is a test div to show mouseover</span><img id="imgsrc" src="/images/test.gif" /></div>
javascript
<script language="javascript">
function hightlight()
{
document.getElementById("textspan").style.color = "blue";
document.getElementById("imgsrc").style.border = "1px solid blue";
//document.getElementById("textspan").setStyle("color","blue");
//document.getElementById("imgsrc").setStyle("border","1px solid blue");
}
function removehightlight()
{
document.getElementById("textspan").style.color = "black";
document.getElementById("imgsrc").style.border = "0px solid blue";
}
</script>
However, this solution is for an image and text in the same div. My image and text reside in two separate divs like so:
javascript
function hightlight()
{
document.getElementById("textspan").style.text = "underline";
document.getElementById("imgsrc").style.border = "5px solid #005596";
}
function removehightlight()
{
document.getElementById("textspan").style.text = "none";
document.getElementById("imgsrc").style.border = "5px solid white";
}
text
<div id="left-menu" >
<div align="right">
<p><!-- #BeginLibraryItem "/Library/left-projects-category.lbi" --> <span class="left-title">Category</span><!-- #EndLibraryItem --><br />
<span class="left-sub">Residential</span><br />
<span id="textspan" onmouseover="hightlight()" onmouseout="removehightlight()">11 Gurney Drive</span><br />
<span id="textspan" onmouseover="hightlight()" onmouseout="removehightlight()">78 LAD</span><br />
</p>
</div>
</div>
image
<div style="float:left; margin:90px 0 0 305px; padding:0 0 100px 0; height:auto;">
<img src="../../images/completed-projects/thumbnails/11-gurney-drive.jpg" width="215" height="170" id="imgsrc" style="border:5px solid white" onmouseover="hightlight()" onmouseout="removehightlight()"/>
<img src="../../images/completed-projects/thumbnails/78-lad.jpg" width="215" height="171" id="imgsrc" style="border:5px solid white" onmouseover="hightlight()" onmouseout="removehightlight()"/>
/div>
MY PROBLEMS
Let's call 11 Gurney Drive - Text1 and 11-gurney-drive.jpg - Image1
78 LAD - Text2 and 78-lad.jpeg - Image2.
My problems:
On Text1 mouseover, it highlights both Text1 and Image1 - Good.
On Text2 mouseover, it highlights Text2 and Image1 - it should highlight Text2 and Image2.
On Image1 mouseover, it highlights only Image1 - it should highlight Text1 and Image1.
On Image2 mouseover, it highlights only Image1 - it should highlight Text2 and Image2.
I have very little experience in customising Javascript; have tried Googling getElementbyId but it all might as well be in Greek.
Edit
I forgot to mention that I've tried adding a 2nd unique element ID called textspan2 and imgsrc2 but that didn't seem to work. What I did:
javascript
function hightlight()
{
document.getElementById("textspan").style.text = "underline";
document.getElementById("imgsrc").style.border = "5px solid #005596";
document.getElementById("textspan2").style.text = "underline";
document.getElementById("imgsrc2").style.border = "5px solid #005596";
}
function removehightlight()
{
document.getElementById("textspan").style.text = "none";
document.getElementById("imgsrc").style.border = "5px solid white";
document.getElementById("textspan2").style.text = "none";
document.getElementById("imgsrc2").style.border = "5px solid white";
}
text
<div id="left-menu" >
<div align="right">
<p><!-- #BeginLibraryItem "/Library/left-projects-category.lbi" --> <span class="left-title">Category</span><!-- #EndLibraryItem --><br />
<span class="left-sub">Residential</span><br />
<span id="textspan" onmouseover="hightlight()" onmouseout="removehightlight()">11 Gurney Drive</span><br />
<span id="textspan2" onmouseover="hightlight()" onmouseout="removehightlight()">78 LAD</span><br />
</p>
</div>
</div>
image
<div style="float:left; margin:90px 0 0 305px; padding:0 0 100px 0; height:auto;">
<img src="../../images/completed-projects/thumbnails/11-gurney-drive.jpg" width="215" height="170" id="imgsrc" style="border:5px solid white" onmouseover="hightlight()" onmouseout="removehightlight()"/>
<img src="../../images/completed-projects/thumbnails/78-lad.jpg" width="215" height="171" id="imgsrc2" style="border:5px solid white" onmouseover="hightlight()" onmouseout="removehightlight()"/>
/div>

getElementById is one of those calls that actually does what it says. :-) It gets a DOM element by its id attribute. Since id must be unique, it gets you one specific element that you can then interact with (for instance, setting its style properties).
So part of your problem is that you have two elements with the ID "textspan", and two elements with the ID "imgsrc", which means the browser will do something undefined because you can't do that.
Within an event handler, this will point to the element that you've put the handler on. So in your highlight and removeHighlight functions, you can use this (rather than getElementById) to get a reference to the img DOM elements. That just leaves the text ones.
You could use a naming convention ("textspan1" and "imgsrc1", "textspan2" and "imgsrc2" for instance), so the handlers would look like this:
function hightlight()
{
var textid = this.id.replace("imgsrc", "textspan");
var text = document.getElementById(textid);
text.style.color = "blue";
this.style.border = "1px solid blue";
}
function removehightlight()
{
var textid = this.id.replace("imgsrc", "textspan");
var text = document.getElementById(textid);
text.style.color = "black";
this.style.border = "0px solid blue";
}
...or you might use an attribute (say, data-text) on the img tags that gives the ID of the text field linked to it; you can get an attribute from a DOM element like this:
var textid = this.getAttribute("data-text");
Custom attributes are invalid in HTML4 and below, but I've never met a browser that had a problem with them. In HTML5 and above, you can have custom attributes as long as they start with data- as above. So if validation is part of your working practices (and it's usually a good idea), you might consider starting to use the HTML5 doctype unless you have a particular reason for staying with the previous one (like, for instance, you're uncomfortable using a doctype for a version of HTML5 that hasn't even reached candidate recommendation stage yet). A lot of us are happy enough to go ahead now.
this is not the element the way you're hooking up the handlers. I'd forgotten, it's been a long time since I used the DOM0 way of hooking up handlers (onmouseover=). But the below works:
Or, because of the way you're attaching the handlers, you could pass an argument into the functions telling them which one they're dealing with:
function hightlight(index)
{
var img = document.getElementById("imgsrc" + index);
var text = document.getElementById("textspan" + index);
text.style.color = "blue";
img.style.border = "1px solid blue";
}
function removehightlight(index)
{
var img = document.getElementById("imgsrc" + index);
var text = document.getElementById("textspan" + index);
text.style.color = "black";
img.style.border = "0px solid blue";
}
...where your onmouseover and onmouseout attributes changes to:
onmouseover="hightlight(1);" onmouseout="removehightlight(1);"
onmouseover="hightlight(2);" onmouseout="removehightlight(2);"
Here's a live example.
Side note: The code you've found is using the mouseover and mouseout events. Be aware that those don't quite do what you may expect they do, and it can bite you, although the specific way you're using them is mostly fine (you're doing more work than necessary, but that's okay). But suppose your markup changed a little:
<span id="textspan" onmouseover="hightlight()" onmouseout="removehightlight()">11 <strong>Gurney</strong> Drive</span><br />
Now there's an element within the span that you're watching those events on. That means that as the user's mouse travels from left-to-right, you'll see a series of mouseover events as the mouse travels over the text "11(space)", then your code will see a mouseout event as the mouse moves over into the word "Gurney". Why does this happen? Because the mouse has moved out of the span and into the strong element. Then it will immediately see another mouseover, because the mouse is moving over the strong element and the mouseover event bubbles up the DOM, so we see it on the span. This may cause flicker as the mouse moves into and out of the strong element.
Internet Explorer has the mouseenter and mouseleave events, which are more suited to what you're doing — but who wants to use events that are limited to only one brand of browser? Well, most good JavaScript libraries emulate these events even on browsers that don't support them natively, which brings me to...
Off-topic 1:
If you're just starting out with JavaScript on browsers, a word of warning: There are a number of browser inconsistencies and awkwardnesses (if that's a word) that libraries like jQuery, Prototype, YUI, Closure, or any of several others can smooth over for you. For what you're doing in this question, enh, they wouldn't bring a huge amount of value. But for more complicated stuff, they can save you a lot of time and trouble, leveraging the good work many others have done before you. Like, for instance, emulating mouseenter and mouseleave on browsers that don't support them. :-) I know for a fact both jQuery and Prototype do that for you, and I suspect others do as well.
Off-topic 2:
It's "highlight", not "hightlight". If someone needs to come maintain your code later, that typo (which is consistent, and so not a bug!) might well trip them up. Separately, the standard practice (which you're free to ignore!) is to camelCase words in function names, so removeHighlight rather than removehightlight. FWIW.

In JavaScript can I make a "click" event fire programmatically for a file input element?

I'd like to make a click event fire on an <input type="file"> tag programmatically.
Just calling click() doesn't seem to do anything or at least it doesn't pop up a file selection dialog.
I've been experimenting with capturing events using listeners and redirecting the event, but I haven't been able to get that to actually perform the event like someone clicked on it.

I have been searching for solution to this whole day. And these are the conclusions that I have made:
For the security reasons Opera and Firefox don't allow to trigger file input.
The only convenient alternative is to create a "hidden" file input (using opacity, not "hidden" or "display: none"!) and afterwards create the button "below" it. In this way the button is seen but on user click it actually activates the file input.
Upload File

You cannot do that in all browsers, supposedly IE does allow it, but Mozilla and Opera do not.
When you compose a message in GMail, the 'attach files' feature is implemented one way for IE and any browser that supports this, and then implemented another way for Firefox and those browsers that do not.
I don't know why you cannot do it, but one thing that is a security risk, and which you are not allowed to do in any browser, is programmatically set the file name on the HTML File element.

You can fire click() on any browser but some browsers need the element to be visible and focused. Here's a jQuery example:
$('#input_element').show();
$('#input_element').focus();
$('#input_element').click();
$('#input_element').hide();
It works with the hide before the click() but I don't know if it works without calling the show method. Never tried this on Opera, I tested on IE/FF/Safari/Chrome and it works. I hope this will help.

THIS IS POSSIBLE:
Under FF4+, Opera ?, Chrome:
but:
inputElement.click() should be called from user action context! (not script execution context)
<input type="file" /> should be visible (inputElement.style.display !== 'none') (you can hide it with visibility or something other, but not "display" property)

just use a label tag, that way you can hide the input, and make it work through its related label
https://developer.mozilla.org/fr/docs/Web/HTML/Element/Label

For those who understand that you have to overlay an invisible form over the link, but are too lazy to write, I wrote it for you. Well, for me, but might as well share. Comments are welcome.
HTML (Somewhere):
<a id="fileLink" href="javascript:fileBrowse();" onmouseover="fileMove();">File Browse</a>
HTML (Somewhere you don't care about):
<div id="uploadForm" style="filter:alpha(opacity=0); opacity: 0.0; width: 300px; cursor: pointer;">
<form method="POST" enctype="multipart/form-data">
<input type="file" name="file" />
</form>
</div>
JavaScript:
function pageY(el) {
var ot = 0;
while (el && el.offsetParent != el) {
ot += el.offsetTop ? el.offsetTop : 0;
el = el.offsetParent;
}
return ot;
}
function pageX(el) {
var ol = 0;
while (el && el.offsetParent != el) {
ol += el.offsetLeft ? el.offsetLeft : 0;
el = el.offsetParent;
}
return ol;
}
function fileMove() {
if (navigator.appName == "Microsoft Internet Explorer") {
return; // Don't need to do this in IE.
}
var link = document.getElementById("fileLink");
var form = document.getElementById("uploadForm");
var x = pageX(link);
var y = pageY(link);
form.style.position = 'absolute';
form.style.left = x + 'px';
form.style.top = y + 'px';
}
function fileBrowse() {
// This works in IE only. Doesn't do jack in FF. :(
var browseField = document.getElementById("uploadForm").file;
browseField.click();
}

Try this solution: http://code.google.com/p/upload-at-click/

If you want the click method to work on Chrome, Firefox, etc, apply the following style to your input file. It will be perfectly hidden, it's like you do a display: none;
#fileInput {
visibility: hidden;
position: absolute;
top: 0;
left: -5000px;
}
It's that simple, I tested it works!

$(document).one('mousemove', function() { $(element).trigger('click') } );
Worked for me when I ran into similar problem, it's a regular eRube Goldberg.

WORKING SOLUTION
Let me add to this old post, a working solution I used to use that works in probably 80% or more of all browsers both new and old.
The solution is complex yet simple. The first step is to make use of CSS and guise the input file type with "under-elements" that show through as it has an opacity of 0. The next step is to use JavaScript to update its label as needed.
HTML The ID's are simply inserted if you wanted a quick way to access a specific element, the classes however, are a must as they relate to the CSS that sets this whole process up
<div class="file-input wrapper">
<input id="inpFile0" type="file" class="file-input control" />
<div class="file-input content">
<label id="inpFileOutput0" for="inpFileButton" class="file-input output">Click Here</label>
<input id="inpFileButton0" type="button" class="file-input button" value="Select File" />
</div>
</div>
CSS Keep in mind, coloring and font-styles and such are totally your preference, if you use this basic CSS, you can always use after-end mark up to style as you please, this is shown in the jsFiddle listed at the end.
.file-test-area {
border: 1px solid;
margin: .5em;
padding: 1em;
}
.file-input {
cursor: pointer !important;
}
.file-input * {
cursor: pointer !important;
display: inline-block;
}
.file-input.wrapper {
display: inline-block;
font-size: 14px;
height: auto;
overflow: hidden;
position: relative;
width: auto;
}
.file-input.control {
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
height: 100%;
position: absolute;
text-align: right;
width: 100%;
z-index: 2;
}
.file-input.content {
position: relative;
top: 0px;
left: 0px;
z-index: 1;
}
.file-input.output {
background-color: #FFC;
font-size: .8em;
padding: .2em .2em .2em .4em;
text-align: center;
width: 10em;
}
.file-input.button {
border: none;
font-weight: bold;
margin-left: .25em;
padding: 0 .25em;
}
JavaScript Pure and true, however, some OLDER (retired) browsers may still have trouble with it (like Netscrape 2!)
var inp = document.getElementsByTagName('input');
for (var i=0;i<inp.length;i++) {
if (inp[i].type != 'file') continue;
inp[i].relatedElement = inp[i].parentNode.getElementsByTagName('label')[0];
inp[i].onchange /*= inp[i].onmouseout*/ = function () {
this.relatedElement.innerHTML = this.value;
};
};
Working jsFiddle Example

It works :
For security reasons on Firefox and Opera, you can't fire the click on file input, but you can simulate with MouseEvents :
<script>
click=function(element){
if(element!=null){
try {element.click();}
catch(e) {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click",true,true,window,0,0,0,0,0,false,false,false,false,0,null);
element.dispatchEvent(evt);
}
}
};
</script>
<input type="button" value="upload" onclick="click(document.getElementById('inputFile'));"><input type="file" id="inputFile" style="display:none">

I know this is old, and all these solutions are hacks around browser security precautions with real value.
That said, as of today, fileInput.click() works in current Chrome (36.0.1985.125 m) and current Firefox ESR (24.7.0), but not in current IE (11.0.9600.17207). Overlaying a file field with opacity 0 on top of a button works, but I wanted a link element as the visible trigger, and hover underlining doesn't quite work in any browser. It flashes on then disappears, probably the browser thinking through whether hover styling actually applies or not.
But I did find a solution that works in all those browsers. I won't claim to have tested every version of every browser, or that I know it'll continue to work forever, but it appears to meet my needs now.
It's simple: Position the file input field offscreen (position: absolute; top: -5000px), put a label element around it, and trigger the click on the label, instead of the file field itself.
Note that the link does need to be scripted to call the click method of the label, it doesn't do that automatically, like when you click on text inside a label element. Apparently the link element captures the click, and it doesn't make it through to the label.
Note also that this doesn't provide a way to show the currently selected file, since the field is offscreen. I wanted to submit immediately when a file was selected, so that's not a problem for me, but you'll need a somewhat different approach if your situation is different.

JS Fiddle: http://jsfiddle.net/eyedean/1bw357kw/
popFileSelector = function() {
var el = document.getElementById("fileElem");
if (el) {
el.click();
}
};
window.popRightAway = function() {
document.getElementById('log').innerHTML += 'I am right away!<br />';
popFileSelector();
};
window.popWithDelay = function() {
document.getElementById('log').innerHTML += 'I am gonna delay!<br />';
window.setTimeout(function() {
document.getElementById('log').innerHTML += 'I was delayed!<br />';
popFileSelector();
}, 1000);
};
<body>
<form>
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)" />
</form>
<a onclick="popRightAway()" href="#">Pop Now</a>
<br />
<a onclick="popWithDelay()" href="#">Pop With 1 Second Delay</a>
<div id="log">Log: <br /></div>
</body>

Here is pure JavaScript solution to this problem. Works well across all browsers
<script>
function upload_image_init(){
var elem = document.getElementById('file');
if(elem && document.createEvent) {
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", true, false);
elem.dispatchEvent(evt);
}
}
</script>

This code works for me. Is this what you are trying to do?
<input type="file" style="position:absolute;left:-999px;" id="fileinput" />
<button id="addfiles" >Add files</button>
<script language="javascript" type="text/javascript">
$("#addfiles").click(function(){
$("#fileinput").click();
});
</script>

My solution for Safari with jQuery and jQuery-ui:
$("<input type='file' class='ui-helper-hidden-accessible' />").appendTo("body").focus().trigger('click');

There are ways to redirect events to the control but don't expect to be able to easily fire events to the fire control yourself as the browsers will try to block that for (good) security reasons.
If you only need the file dialog to show up when a user clicks something, let's say because you want better looking file upload buttons, then you might want to take a look at what Shaun Inman came up with.
I've been able to achieve keyboard triggering with creative shifting of focus in and out of the control between keydown, keypress & keyup events. YMMV.
My sincere advice is to leave this the alone, because this is a world of browser-incompatibility-pain. Minor browser updates may also block tricks without warning and you may have to keep reinventing hacks to keep it working.

I was researching this a while ago because I wanted to create a custom button that would open the file dialog and start the upload immediately. I just noticed something that might make this possible - firefox seems to open the dialog when you click anywhere on the upload. So the following might do it:
Create a file upload and a separate element containing an image that you want to use as the button
Arrange them to overlap and make the file element backgroud and border transparent so the button is the only thing visible
Add the javascript to make IE open the dialog when the button/file input is clicked
Use an onchange event to submit the form when a file is selected
This is only theoretical since I already used another method to solve the problem but it just might work.

I had a <input type="button"> tag hidden from view. What I did was attaching the "onClick" event to any visible component of any type such as a label. This was done using either Google Chrome's Developer Tools or Mozilla Firefox's Firebug using the right-click "edit HTML" command. In this event specify the following script or something similar:
If you have JQuery:
$('#id_of_component').click();
if not:
document.getElementById('id_of_component').click();
Thanks.

Hey this solution works.
for download we should be using MSBLOB
$scope.getSingleInvoicePDF = function(invoiceNumberEntity) {
var fileName = invoiceNumberEntity + ".pdf";
var pdfDownload = document.createElement("a");
document.body.appendChild(pdfDownload);
AngularWebService.getFileWithSuffix("ezbillpdfget",invoiceNumberEntity,"pdf" ).then(function(returnedJSON) {
var fileBlob = new Blob([returnedJSON.data], {type: 'application/pdf'});
if (navigator.appVersion.toString().indexOf('.NET') > 0) { // for IE browser
window.navigator.msSaveBlob(fileBlob, fileName);
} else { // for other browsers
var fileURL = window.URL.createObjectURL(fileBlob);
pdfDownload.href = fileURL;
pdfDownload.download = fileName;
pdfDownload.click();
}
});
};
For AngularJS or even for normal javascript.

This will now be possible in Firefox 4, with the caveat that it counts as a pop-up window and will therefore be blocked whenever a pop-up window would have been.

Here is solution that work for me:
CSS:
#uploadtruefield {
left: 225px;
opacity: 0;
position: absolute;
right: 0;
top: 266px;
opacity:0;
-moz-opacity:0;
filter:alpha(opacity:0);
width: 270px;
z-index: 2;
}
.uploadmask {
background:url(../img/browse.gif) no-repeat 100% 50%;
}
#uploadmaskfield{
width:132px;
}
HTML with "small" JQuery help:
<div class="uploadmask">
<input id="uploadmaskfield" type="text" name="uploadmaskfield">
</div>
<input id="uploadtruefield" type="file" onchange="$('#uploadmaskfield').val(this.value)" >
Just be sure that maskfied is covered compeltly by true upload field.

You can do this as per answer from Open File Dialog box on <a> tag
<input type="file" id="upload" name="upload" style="visibility: hidden; width: 1px; height: 1px" multiple />
Upload

I found that if input(file) is outside form, then firing click event invokes file dialog.

Hopefully this helps someone - I spent 2 hours banging my head against it:
In IE8 or IE9, if you trigger opening a file input with javascript in any way at all (believe me I've tried them all), it won't let you submit the form using javascript, it will just silently fail.
Submitting the form via a regular submit button may work but calling form.submit(); will silently fail.
I had to resort to overlaying my select file button with a transparent file input which works.

This worked for me:
<script>
function sel_file() {
$("input[name=userfile]").trigger('click');
}
</script>
<input type="file" name="userfile" id="userfile" />
Click

it's not impossible:
var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window);
setTimeout(function(){ document.getElementById('input_field_id').dispatchEvent(evObj); },100);
But somehow it works only if this is in a function which was called via a click-event.
So you might have following setup:
html:
<div onclick="openFileChooser()" class="some_fancy_stuff">Click here to open image chooser</div>
<input type="file" id="input_img">
JavaScript:
function openFileChooser() {
var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window);
setTimeout(function()
{
document.getElementById('input_img').dispatchEvent(evObj);
},100);
}

You can use
<button id="file">select file</button>
<input type="file" name="file" id="file_input" style="display:none;">
<script>
$('#file').click(function() {
$('#file_input').focus().trigger('click');
});
</script>

To do so you can click an invisible, pass-through element over the file input :
function simulateFileClick() {
const div = document.createElement("div")
div.style.visibility = "hidden"
div.style.position = "absolute"
div.style.width = "100%"
div.style.height = "100%"
div.style.pointerEvents = "none"
const fileInput = document.getElementById("fileInput") // or whatever selector you like
fileInput.style.position = "relative"
fileInput.appendChild(div)
const mouseEvent = new MouseEvent("click")
div.dispatchEvent(mouseEvent)
}