javascript 如何检测 CSS3 调整大小事件

How to detect CSS3 resize events

提问by Boldewyn

The CSS3 resize property can be assigned to arbitrary elements. I'm looking for a way to detect such a resize on, say, divs (I don't mind it only working in Firefox at the moment):

CSS3 resize 属性可以分配给任意元素。我正在寻找一种方法来检测这样的调整大小，比如说，div（我不介意它目前只在 Firefox 中工作）：

div {
  resize: horizontal;
  overflow: hidden;
}

Unfortunately, the onresizeevent seems not to be fired on the div. How can I detect in JavaScript when such a user-instantiated resize has happened?

不幸的是，该onresize事件似乎并未在 div 上触发。当发生这种用户实例化的调整大小时，我如何在 JavaScript 中检测到？

Edit:FWIW I had opened a bug report over at Mozilla. If you want to track it: https://bugzilla.mozilla.org/show_bug.cgi?id=701648

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

采纳答案by robertc

Listen to DOMAttrModifiedevents. Got the idea from this answer, this jsFiddleappears to work in Firefox 8 (if you open the console).

收听DOMAttrModified事件。从这个答案中得到了想法，这个 jsFiddle似乎在 Firefox 8 中工作（如果你打开控制台）。

回答by Daniel Darabos

Resizing is like a style change. As such it can be observed with a MutationObserver.

调整大小就像改变风格。因此，它可以通过MutationObserver观察到。

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

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

<textarea></textarea>

回答by Felix

Since the resizeevent clearly doesn't work (currently, at least), you can try one of these alternative options:

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

1. Use a combination of mousedown, mousemoveand/or mouseupto tell whether the divis being / has been resized. If you want really fine-grained control you can check in every mousemoveevent how much / if the div has been resized. If you don't need that, you can simply not use mousemoveat all and just measure the divin mousedownand mouseupand figure out if it was resized in the latter.
2. Poll every 200ms or so (depending on your needs) and compare the current size with the last known size. See setTimeout().

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

回答by Marc J. Schmidt

You can use the ResizeSensorclass of the css-element-queries polyfill from

您可以使用ResizeSensor来自 css-element-queries polyfill 的类

https://github.com/marcj/css-element-queries

https://github.com/marcj/css-element-queries

It allows you to call a javascript function on size changes for all types of elements, not only for window. It sets up a real sensor, not a javascript setTimeoutpoll.

它允许您针对所有类型的元素（不仅是window. 它设置了一个真正的传感器，而不是一个 javascriptsetTimeout轮询。

Use it like this:

像这样使用它：

new ResizeSensor($('#myelement'), function() {
    console.log("myelement's size has changed");
});

Supported browsers are: all incl. IE6+.

支持的浏览器是：all incl。IE6+。

回答by MarkBeharrell

This seemed to work pretty well for me:

这对我来说似乎很有效：

$("body").on('mousedown mousemove', ".resizeItem", function () {
    console.log($(this).height());
})

"Use a combination of mousedown, mousemove and/or mouseup"

“使用mousedown、mousemove 和/或mouseup 的组合”

as per Felixs answer.

根据 Felixs 的回答。

Especially useful when combining a custom search result panel with Dev Extremes Scroll View and you want full control over it.

在将自定义搜索结果面板与 Dev Extremes Scroll View 结合使用时特别有用，并且您希望对其进行完全控制。

$("body").on('mousedown mousemove', ".scrollContainer", function () {
    var h = $(this).height() - 20;
    $(".scrollArea").dxScrollView('instance').option('height', h);
});

回答by Naftali aka Neal

According to this siteit only works in internet explorer 9.

根据该站点，它仅适用于 Internet Explorer 9。

Try this fiddle: http://jsfiddle.net/maniator/3Zva3/

试试这个小提琴：http: //jsfiddle.net/maniator/3Zva3/