addEventListener（'resize'不适用于具有相对大小的div

时间：2019-04-29 22:07:11

标签： javascript html

我正在尝试为具有相对大小的div设置调整大小的侦听器。 div上具有height: 100%样式，我希望在div的像素高度随其父容器而变化时触发该事件。这是我的基本代码：

index.html

<html>
  <body>
<div class="foo"></foo>
  </body>
</html>

main.css

.foo {
  background-color: blue;
  height: 100%;
    width: 100%;
}

html, body {
  height: 100%;
  width: 100%;
}

main.js

document.querySelector(".foo").addEventListener("resize", () => {
  console.log("foo resize");
});

window.addEventListener("resize", () => {
  console.log("window resize");
});

调整窗口大小时，会在控制台中获得预期的“窗口调整大小”文本，但从未打印“ foo调整大小”。要让foo调整大小处理程序启动，还需要做其他事情吗？

1 个答案:

答案 0 :(得分：1)

resize事件仅在window对象上触发。正在制作ResizeObserver，可以观察任意元素的大小调整，但是browser support仍然很稀缺。但是，有resize-observer-polyfill on NPM之类的polyfill可以模拟其行为。