CODEWITHSUNDEEP
javascripthtmlthree.jsinternet-explorer-11
RoeePeleg
RoeePeleg

Reputation: 31

addEventListener IE11 bug

I am working with three.js on IE11 and have a problem with the addEventListener func;

The code inside the function is never being executed:

var fileInput = document.createElement( 'input' ); 
fileInput.type = 'file'; 
fileInput.addEventListener( 'change', function ( event ) { 
        editor.loader.loadFile( fileInput.files[ 0 ] );
} );

the browser familiar with the addEventListener func, bet somehow the inside function is not being called when i 'click' fileInput button:

var importOption = new UI.Panel();
importOption.setClass('option');
importOption.setTextContent('Import');
importOption.onClick(function () {

    fileInput.click();

} );
options.add(importOption);

Any ideas of how can i trigger the 'change' function? I want it to be triggered by user button press, like it is written in the code.

This code was taken from the three.js source files, and works just fine on chrome.

Thanks in advance.

Upvotes: 0

Views: 566

Answers (1)

F. Cappleman-Lynes
F. Cappleman-Lynes

Reputation: 11

I had a similar problem with binding a click event to an html element created in this way. It didn't work on IE11 in Windows 8, but did in IE11 on Windows 10, Edge and in all other browsers.

My code looked like:

var trigger = document.createElement( 'div' ); 
fileInput.addEventListener( 'click', function ( e) { 
    console.log("clicked the trigger");
} ); 
trigger.click();

That log wasn't appearing in my console.

I found that I could resolve the problem by adding the trigger to document.body.

var trigger = document.createElement( 'div' ); 
trigger.style.display = "none";
document.body.appendChild(trigger);
fileInput.addEventListener( 'click', function ( e ) { 
    console.log("clicked the trigger");
} ); 
trigger.click();

Hope that helps!

Upvotes: 1

Related Questions