Question

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

PS：就我的目的而言，定义一个“拖动调整大小”是可以的，因为调整大小发生在mousedown（在窗口上合适的调整大小的轨迹上）和相应的mouseup事件之间，忽略用户在这两个端点之间按住鼠标按钮时可能发生的任何暂停。

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

Answer 2

我无法100％做得很好。但这是可行的。计划是每毫秒检查一个像素（这里我检查调整大小的中间部分，在beginnig和结束时调整大小通常在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))};

如何检测窗口末尾的鼠标调整大小？

2 个答案: