如何在窗口调整大小结束时检测 mouseup？答案

【问题标题】：How to detect the mouseup at the end of a window resize?如何在窗口调整大小结束时检测 mouseup？
【发布时间】：2013-12-17 12:55:16
【问题描述】：

我正在寻找一种方法来在窗口调整大小的最后（通过拖动完成）检测 mouseup 事件。（AFAICT，resize 处理程序未在 $(window) 或 $(document) 上接收到此事件。）

PS：出于我的目的，可以定义“拖动调整大小”作为在 mousedown（在窗口上合适的调整大小位置）与其对应的 mouseup 事件之间发生的调整大小，忽略用户在这两个端点之间可能进行的任何暂停，同时仍按住鼠标按钮。

【问题讨论】：

IE 有一个resizeEnd() 事件，但你需要更多跨浏览器的东西。我认为当前的最佳做法是等待浏览器“停止调整大小”，例如“您已按下鼠标但在 x 时间内没有对其进行任何操作。”当该时间到期时，您可以引发事件。有关示例，请参见此处：stackoverflow.com/questions/5489946/…
四年了，没有人给出答案？任何人？任何人？比勒？

标签： javascript jquery events resize mouseevent

【解决方案1】：

$ npm install resizeend

或添加到您的页面：

<script src="https://raw.githubusercontent.com/jeremenichelli/resizeend/master/dist/resizeend.min.js"></script>

然后只使用事件：

window.addEventListener('resizeend', function() {
    alert('You are not resizing the window anymore!');
});

【讨论】：

【解决方案2】：

我无法得到 100% 运行良好的东西。但它有点工作。计划是每毫秒检查某个像素（这里我检查调整大小的中间，在开始和结束时调整大小通常低于 1.5），然后设置一个计时器，但浏览器不够灵敏，只有像调整大小一样触发 8 倍。

let resizeTimer;
let w = 0;
let ww = 100;
let t = new Date();
t=t.getTime();
let tt = new Date();
let d = 0;
let ms = 0;

window.onresize = function(){
    ww = w;
    w = window.innerWidth
    d=w<ww?ww-w:w-ww;
    tt = new Date();
    tt = tt.getTime();
    ms= tt-t;
    t=tt;
    console.log(d/ms)
    if(d/ms>1.5){clearTimeout(resizeTimer);
    resizeTimer= setTimeout(function(){console.log("trigger")}, 210);
    }
};

缩小版：

var a,b=0,c=100,d=new Date;d=d.getTime();var e=new Date,f=0,g=0;window.onresize=function(){c=b;b=window.innerWidth;f=b<c?c-b:b-c;e=new Date;e=e.getTime();g=e-d;d=e;1.5>f/g&&(clearTimeout(a),a=setTimeout(function(){console.log("trigger")},210))};

【讨论】：