Question

我的页面中有一个div元素。以下是我希望它具有的功能：

点击浏览器窗口，即点击后最大化
在最大化之后，当浏览器窗口大小发生变化时，div元素将保持最大化。
当它最大化时，点击它会在最大化之前将div恢复为原始大小。

为了实现第二点，我在窗口上注册了一个resize事件以保持最大化状态。当涉及到第三点时，resize事件被移除。但是，似乎无法删除resize事件，因为当我调整浏览器窗口时，div元素会再次最大化。谁能告诉我发动机罩下面会发生什么？

http://jsbin.com/pokirokahe/edit?html,output

!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      border: 2px solid blue;
      background: gray;
    }
    body {
      margin: 0;
    }
  </style>
</head>

<body>
  <div></div>
  <script>
    var domDiv = document.getElementsByTagName("div")[0];
    var maximized = false;
    var originSize = {};

    originSize.w = parseFloat(getComputedStyle(domDiv, null).width);
    originSize.h = parseFloat(getComputedStyle(domDiv, null).height);
    domDiv.addEventListener("click", function() {
      if (!maximized) {
        fullfill();
        maximized = true;
        console.log("maximized true, adding event listener");
        window.addEventListener("resize", fullfill);
      } else {
        this.style.width = originSize.w + "px";
        this.style.height = originSize.h + "px";
        console.log("maximized false, removing event listener");
        window.removeEventListener("resize", fullfill);
        maximized = false;
      }

      function fullfill() {
        var screensize = getViewportSize();
        console.log(screensize.w + " " + screensize.h);
        var divBorder = {
          top: parseFloat(getComputedStyle(domDiv, null).borderTopWidth),
          bottom: parseFloat(getComputedStyle(domDiv, null).borderBottomWidth),
          left: parseFloat(getComputedStyle(domDiv, null).borderLeftWidth),
          right: parseFloat(getComputedStyle(domDiv, null).borderRightWidth)
        };

        domDiv.style.width = screensize.w - divBorder.left - divBorder.right + "px";
        domDiv.style.height = screensize.h - divBorder.top - divBorder.bottom + "px";
      }
    });

    function getViewportSize(w) {
      w = w || window;

      if (w.innerWidth != null) return {
        w: w.innerWidth,
        h: w.innerHeight
      };
      var d = w.document;
      if (document.compatMode == "CSS1Compat")
        return {
          w: d.documentElement.clientWidth,
          h: d.documentElement.clientHeight
        };
      return {
        w: d.body.clientWidth,
        h: d.body.clientHeight
      };
    }
  </script>
</body>

</html>

Answer 1

每次触发click事件时，您都定义了一个名为fullfill的函数，因此fullfill函数addEventListener不等于您删除的函数。如果您希望自己的网络正常运行，则应该从fullfill eventListner中定义名为click的函数。

Answer 2

我认为在这种情况下最好使用css，因为你需要最大化div并获得浏览器的大小，使用绝对位置或固定到div并给它高度：100％，width：100％它将通过浏览器自动重新调整大小，它将为您节省JS事件的麻烦。

为什么我在窗口上删除'resize'事件失败了？

2 个答案: