More than 5 years have passed since last update.

Firefox のイベントリスナで drop イベントを受け取るには dragover をpreventDefault する

JavaScript

Last updated at 2016-09-16Posted at 2016-09-16

Chrome, Safari は el.addEventListener("drop", () => {}) だけで動くが、Firefox は動かなくてハマった。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div class="container" style="height: 200px; width: 200px; background-color: red;"></div>
    <script>
      const container = document.querySelector(".container");
      container.addEventListener("dragover", (ev) => {
        ev.preventDefault(); // これがないと drop が発火しない
      });
      container.addEventListener("dragenter", (ev) => {
        ev.preventDefault(); // 一部のブラウザではこれも必要、というのを見かけたが、どのブラウザか不明
      });
      container.addEventListener("drop", (ev) => {
        ev.preventDefault();
        console.log("drop");
      });
    </script>
  </body>
</html>

とのこと

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up