我们能否区分导致 Chrome 中的 window.resize 事件的原因？

Question

当下载事件被触发时，下载栏会出现在Chrome浏览器的底部，这将触发 window.resize 事件。同样，如果我们关闭下载栏，也会触发一个window.resize事件。能否区分事件是下载栏触发还是手动触发？谢谢！！

Answer 1

您不能 100% 知道导致调整大小的原因，但您可以根据更改的尺寸进行推断。这是一个粗略的例子，说明你可以如何去做：

const state = {
  width: window.innerWidth,
  height: window.innerHeight
};

const DOWNLOAD_BAR_SIZE = 50;
const TOLERANCE = 0.25;

window.addEventListener("resize", () => {
  let type = "resize";

  const diffHeight = state.height - window.innerHeight;
  const bounds = {
    min: DOWNLOAD_BAR_SIZE * (1 - TOLERANCE),
    max: DOWNLOAD_BAR_SIZE * (1 + TOLERANCE)
  };

  if (diffHeight >= bounds.min && diffHeight <= bounds.max) {
    type = "download";
  }

  state.width = window.innerWidth;
  state.height = window.innerHeight;

  console.log(type);
});

这将跟踪 window 的当前大小，并在将来调整 window 的大小。当下载栏从底部弹出时，高度尺寸将改变 ~50px。您可以更改 TOLERANCE 和 DOWNLOAD_BAR_SIZE 常量以满足您的需要。

可以将类似的策略应用于开发工具。

Answer 2

我认为代码有一些错误，但是这个基础非常有用。

bounds.min 和 bounds.max 通过与 dffHeight 比较计算为布尔值，但随后又与 diffHeight 进行比较。

我更喜欢将它们设为数字，以便显示它们的值。

const state = {
    width: window.innerWidth,
    height: window.innerHeight
};

const DOWNLOAD_BAR_SIZE = 50;
const TOLERANCE = 0.25;
let type = "resize";

window.addEventListener("resize", () => {

    const diffHeight = state.height - window.innerHeight;
    const bounds = {
        min: DOWNLOAD_BAR_SIZE * (1 - TOLERANCE),
        max: DOWNLOAD_BAR_SIZE * (1 + TOLERANCE)
    };

    console.log( "bounds.min = " + bounds.min + ", bounds.max = " + bounds.max + ", diffHeight = " + diffHeight );

    if ( /* diffHeight >= bounds.min && */ diffHeight <= bounds.max) {
        type = "download";
    } else {
        type = "resize";    
    }

    state.width = window.innerWidth;
    state.height = window.innerHeight;

    console.log(type);
});

我将调整大小类型指示器从侦听器中移出，以防我需要在其他地方知道。此外，我在关闭工具栏时收到多个事件，因此我不再检查最小值（例如，打开工具栏会触发一个调整大小为 57 的事件，关闭会触发三个事件 14、20、23）。

我们能否区分导致 Chrome 中的 window.resize 事件的原因？

Can we distinguish the reason that cause a window.resize event in Chrome?

javascript

google-chrome

download

window-resize