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

Question

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

Pet*_*urz 2 javascript addeventlistener window-resize device-orientation

我需要检测手机视口宽度的变化。我使用以下代码来检测浏览器窗口的调整大小更改，但在调整窗口大小时 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>

Run Code Online (Sandbox Code Playgroud)

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

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

Answer 1

Ele*_*Ele 6

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

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

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，1 月前
查看次数：	4304 次
最近记录：	7 年，1 月前