如何检测CSS3调整大小事件

Question

CSS3 resize属性可以分配给任意元素.我正在寻找一种方法来检测这样的调整大小,比如divs(我不介意它目前仅在FF中工作):

div {
  resize: horizontal;
  overflow: hidden;
}

不幸的是,onresize事件似乎没有被解雇.当这样的用户实例化调整大小发生时,如何在JavaScript中检测到？

编辑: FWIW我在Mozilla上打开了一个错误报告.如果你想跟踪它:https://bugzilla.mozilla.org/show_bug.cgi？id = 701648

Answer 1

调整大小就像风格变化.因此可以使用MutationObserver观察到它.

let observer = new MutationObserver(function(mutations) {
  console.log('mutations:', mutations);
});

let child = document.querySelector('textarea');
observer.observe(child, { attributes: true });

<textarea></textarea>

Answer 2

听听DOMAttrModified活动.从这个答案得到了这个想法,这个jsFiddle似乎可以在Firefox 8中运行(如果你打开控制台).

Answer 3

由于该resize事件显然不起作用（至少目前是这样），您可以尝试以下替代选项之一：

1. 使用mousedown,mousemove和/或的组合mouseup来判断div/ 是否已调整大小。如果您想要真正细粒度的控制，您可以在每个mousemove事件中检查div 的大小/是否调整了大小。如果你不需要，你可以简单地使用请勿mousemove在所有的，只是测量div的mousedown和mouseup图，如果它是在后者调整了。
2. 每 200 毫秒左右轮询一次（取决于您的需要）并将当前大小与最后一个已知大小进行比较。见setTimeout()。