Question

我需要检测移动设备视口宽度的变化。我使用以下代码来检测浏览器窗口的大小更改，但是当窗口调整大小时，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整理了上面的代码。

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

Answer 1

您突然调用了这些函数，因此基本上，您是从这些函数（在本例中为undefined）中传递结果。

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

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

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

1 个答案: