时间戳

首页 > 解决方案 > 调整浏览器窗口大小时，addEventListener 'resize' 不会触发

javascript - 调整浏览器窗口大小时，addEventListener 'resize' 不会触发

问题描述

我需要检测手机视口宽度的变化。我使用以下代码来检测浏览器窗口的调整大小更改，但是当窗口调整大小时 addEventListener 不会触发我的函数：

<html>
<head>
</head>
<body>

<div id="size">-</div><br>
<div id="orientation">-</div>

<script>

window.addEventListener('resize', sizeChanged() );

function sizeChanged() {

    var w=window.outerWidth;
    var h=window.outerHeight;
    var txt='<b>sizeChanged:</b><br> W=' + w + 'px<br> H=' + h+'px';
    document.getElementById('size').innerHTML=txt;
    console.log(txt);
}

window.addEventListener('orientationchange', orientationChanged() );

function orientationChanged() {

  var w=window.outerWidth;
  var h=window.outerHeight;
  var txt='<b>orientationChanged:</b><br> W=' + w + 'px<br> H=' + h+'px';
  document.getElementById('orientation').innerHTML=txt;
  console.log(txt);

}

</script>

</body>
</html>

我用 FF 62.0.3、Chrome 70.0.3538.77 和 IE11 尝试了上面的代码。

有谁知道我的代码有什么问题？

标签： javascriptaddeventlistenerwindow-resizedevice-orientation

解决方案

你突然调用了这些函数，所以基本上，你从这些函数中传递了结果，在这种情况下，undefined.

您需要将函数作为参考（参数）传递，例如，

window.addEventListener('resize', sizeChanged); // Look at the missing parentheses.
window.addEventListener('orientationchange', orientationChanged); // Look at the missing parentheses.

推荐阅读