如何检测窗口调整大小结束时的鼠标松开事件？

Question

我正在寻找一种方法来检测窗口拖动调整大小的最终mouseup事件。(据我所知，此事件无法由$（window）或$（document）上的resize处理程序捕获。) PS：对于我的目的，可以将“拖动调整大小”定义为在窗口上适当的调整大小位置进行的调整，在两个端点之间保持鼠标按钮按下的任何暂停都会被忽略，只考虑其相应的鼠标抬起事件。

- kjo

---

IE有一个resizeEnd()事件，但你需要更跨浏览器的解决方案。目前最佳做法是等待浏览器"停止调整大小"，即"你按下鼠标但在x时间内没有进行任何操作"。当时间到期时，你可以触发一个事件。这里有一些例子：https://dev59.com/0G035IYBdhLWcg3wVeXn - Cᴏʀʏ

四年了，没有人有答案吗？有人吗？Bueller？ - SMBiggs

Answer 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!');
});

- Ilya Kharlamov

Answer 2

我无法完全让某些东西正常工作。但它有点能用。 计划是每毫秒检查一个特定的像素（在这里我检查调整大小的中间部分，在开始和结束时，调整大小通常小于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))};

- Servus