我们能否区分出在Chrome中导致window.resize事件的原因? [英] Can we distinguish the reason that cause a window.resize event in Chrome?

问题描述

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

When a download event is triggerd, a download bar will appear at the bottom of Chrome browser, which will trigger a window.resize event. Similarly, if we close the download bar, it also triggers a window.resize event. Can we distinguish whether the event is trigger by the download bar or manual operation? Thank you!!

推荐答案

您无法100％知道是什么导致了调整大小，但是您可以根据更改的尺寸来推断出调整大小.这是您可能如何做的一个粗略示例:

You can't 100% know what caused the resize, but you can infer it based on the dimension changed. Here is a crude example of how you might go about that:

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: diffHeight >= DOWNLOAD_BAR_SIZE * (1 - TOLERANCE),
    max: diffHeight <= 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);
});

这将跟踪窗口的当前大小，并在该窗口上将来调整大小.当下载栏从底部弹出时，高度尺寸将更改〜50px.您可以更改 TOLERANCE 和 DOWNLOAD_BAR_SIZE 常量以满足您的需求.

This will keep track of the current size of the window, and future resizes on that window. When a download bar pops up from the bottom, the height dimension will change by ~50px. You can change the TOLERANCE and DOWNLOAD_BAR_SIZE constants to fit your needs.

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

A similar strategy can be applied to dev tools.

这篇关于我们能否区分出在Chrome中导致window.resize事件的原因?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！