为什么我无法在窗口上删除“调整大小”事件？

Question

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

单击后填写浏览器窗口，即最大化
最大化后，当浏览器窗口大小更改时，div元素保持最大化。
最大化后，单击它可将div恢复为最大化之前的原始大小。

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

http://jsbin.com/pokirokahe/edit?html，输出

 !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出你的click eventListner。

Answer 2

好吧，我认为在这种情况下最好使用css，因为您需要将div最大化并获取浏览器的大小，使用绝对位置或固定到div的位置并将其设置为height：100％，width：100％使用浏览器自动调整大小，它将为您节省JS事件的麻烦。

为什么我无法在窗口上删除“调整大小”事件？

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-11-02 08:19:33

解决方案2
0 2015-11-02 07:14:46

为什么我无法在窗口上删除“调整大小”事件？

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-11-02 08:19:33

解决方案2 0 2015-11-02 07:14:46

解决方案1
1 已采纳 2015-11-02 08:19:33

解决方案2
0 2015-11-02 07:14:46