'JavaScript runtime error: Object doesn't support property or method 'addEventListener

Am using Asp.Net 2.0, am trying drag and drop files using asp.net. for this process am using following js's

<script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../Scripts/modernizr-2.5.3.js" type="text/javascript"></script>

that's why the error comes like this

JavaScript runtime error: Object doesn't support property or method 'addEventListener

am using IE11

so i was used one code

<meta http-equiv="X-UA-Compatible" content="IE=edge;" />

it is not working

and my script is

 <script type="text/javascript" language="javascript">



    var selectedFiles;

      $(document).ready(function () {
alert("");
        if (!Modernizr.draganddrop) {
        //alert("2");
          alert("This browser doesn't support File API and Drag & Drop features of HTML5!");
          return;
        }

        var box;
        box = document.getElementById("box");
       alert(box);
        box.addEventListener("dragenter", OnDragEnter, false);
        box.addEventListener("dragover", OnDragOver, false);
        box.addEventListener("drop", OnDrop, false);

        $("#upload").click(function () {
          var data = new FormData();
          for (var i = 0; i < selectedFiles.length; i++) {
            data.append(selectedFiles[i].name, selectedFiles[i]);
          }
          $.ajax({
            type: "POST",
            url: "FileHandler.ashx",
            contentType: false,
            processData: false,
            data: data,
            success: function (result) {
              alert(result);
            },
            error: function () {
              alert("There was error uploading files!");
            }
          });
        });

      });;

      function OnDragEnter(e) {
        e.stopPropagation();
        e.preventDefault();
      }

      function OnDragOver(e) {
        e.stopPropagation();
        e.preventDefault();
      }

      function OnDrop(e) {
        e.stopPropagation();
        e.preventDefault();
        selectedFiles = e.dataTransfer.files;
        $("#box").text(selectedFiles.length + " file(s) selected for uploading!");
      }



    </script>

and my aspx page is

<body>
<form id="form1" runat="server">
<center>
  <div id="box">Drag & Drop files from your machine on this box.</div>
  <br />
  <input id="upload" type="button" value="Upload Selected Files" />
</center>
</form>

But this application drag and drop files is working fine in chrome and firefox only problem in IE

Suggest me to get a solution. Thanks in advance.

javascript jquery

Solution 1:^[1]

take out ie11 from your met tag, and instead add the following code. This is explained here.

/* IE11 Fix for SP2010 */
if (typeof UserAgentInfo.strBrowser !== 'undefined' && !window.addEventListener) {
     UserAgentInfo.strBrowser=1;
}

Solution 2:^[2]

What's your document mode set to in IE?

Press F12 and you should see a dropdown with a number or the word edge, make sure it's set to edge. Even though you're using the meta tag to set the document mode if you previously had it set to anything else it will override that.

Solution 3:^[3]

Edit the plunkr to see where it fails - I don't have jQuery 1.7.2 to hand...but tested in internet explorer 11 and can't see that error. I'm using the click event as it is an easier event to generate in the browser and it is the addEventListener method that is throwing.

http://embed.plnkr.co/Smm421v5In2YYJAJXNTW/preview

<!DOCTYPE html>
<html>

  <meta http-equiv="X-UA-Compatible" content="IE=edge;" />
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link data-require="[email protected]" data-semver="3.0.0-rc2" rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="[email protected]" data-semver="3.0.0-rc2" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/js/bootstrap.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>Hello Plunker!</h1>
    <div id="box" style="height: 100px; background-color: red">Click area</div>
  </body>
</html>

...and in the script...

'use strict';
/* global $ */


console.log("Hey!");
$(document).ready(function() {
  var box;
  box = document.getElementById("box");
  console.log(box);
  box.addEventListener("click", OnClick, false);
});    

var OnClick = function() {
  console.log('in OnClick');
  $("#box").text("Clicked");
};

Solution 4:^[4]

This is due to compatibility issue add below in the web.config file

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <add name="X-UA-Compatible" value="IE=EmulateIE9" />
        </customHeaders>
    </httpProtocol>
</system.webServer>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	hiradyazdan
Solution 2	BurkDiggler
Solution 3	Will
Solution 4	Yanga

'JavaScript runtime error: Object doesn't support property or method 'addEventListener

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]