JavaScript/CSS：检测用户何时调整了元素的大小

rjee0c15 于 2022-12-05 发布在 Java

关注(0)|答案(2)|浏览(107)

假设有一个div，它可以像下面的textarea一样垂直调整大小。当用户调整div的大小时，我想运行一个javascript函数，如下面的resizeHandler。
看起来resize事件只针对文档/窗口。resize观察器触发所有事件，比如当文档加载时，它将触发resize观察器事件。因此，我设置了一个超时，以便在页面加载后应用resize观察器，但resize观察器似乎记住了历史上的resize，并触发了以前的resize事件。
当用户调整div大小时，是否有一种干净的方式来运行resizeHandler()，而不是页面加载布局转换？
第一个
注意：我不能删除div的样式属性，它设置了max-height。

css

来源：https://stackoverflow.com/questions/74658707/javascript-css-detect-when-an-element-has-been-resized-by-the-user

2条答案

按热度按时间

fcwjkofz1#

最简单的方法是在可调整大小的div上添加一个eventlitener，然后使用resizeObserver。

const resizeable_div = document.querySelector(".resizeable");

resizeable_div.addEventListener("mouseup", () => {
  function outputsize() {
    console.log("resized");
  }

  new ResizeObserver(outputsize).observe(resizeable_div);
});

但这将忽略页面重新加载，你想要的，只有当用户对div做了什么时才会触发。
希望这对你有帮助。

赞(0）回复(0）举报 2022-12-05

jexiocij2#

主要原因是我希望删除maxHeight样式属性，以便可以手动调整其大小：

DIV.get('LIST').addEventListener('mousemove', this.mouseMoveHandle.bind(this));

    mouseMoveHandle(event) {
        DIV.resized = DIV.style.getPropertyValue('height') !== '' 
        if (DIV.resized) DIV.style.maxHeight = 'unset';
    }

赞(0）回复(0）举报 2022-12-05

我来回答

JavaScript/CSS：检测用户何时调整了元素的大小

2条答案

相关问题

热门标签

最新问答