Как обнаружить события изменения размера CSS3

Question

Свойство CSS3 resize может быть назначено произвольным элементам. Я ищу способ обнаружить такое изменение размера, скажем, div (я не против, чтобы это работало только в FF на данный момент):

div {
  resize: horizontal;
  overflow: hidden;
}

К сожалению, onresize Кажется, что событие не было запущено на div. Как я могу обнаружить в JavaScript, когда произошло такое изменение размера, созданное пользователем?

Редактировать: FWIW Я открыл сообщение об ошибке в Mozilla. Если вы хотите отслеживать это: https://bugzilla.mozilla.org/show_bug.cgi?id=701648

Answer 1

Слушать DOMAttrModified события Получил идею из этого ответа, этот jsFiddle, похоже, работает в Firefox 8 (если вы открываете консоль).

Answer 2

Изменение размера похоже на изменение стиля. Таким образом, это можно наблюдать с помощью MutationObserver.

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

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

<textarea></textarea>

Answer 3

Так как resize событие явно не работает (в настоящее время, по крайней мере), вы можете попробовать один из следующих альтернативных вариантов:

1. Используйте комбинацию mousedown, mousemove и / или mouseup сказать, является ли div в настоящее время / был изменен. Если вы хотите действительно детальный контроль, вы можете проверить каждый mousemove событие, сколько / если div был изменен. Если вам это не нужно, вы можете просто не использовать mousemove на всех и просто измерить div в mousedown а также mouseup и выяснить, не изменился ли он в последнем.
2. Опрашивайте каждые 200 мс или около того (в зависимости от ваших потребностей) и сравнивайте текущий размер с последним известным размером. Увидеть setTimeout(),

Answer 4

Вы можете использовать ResizeSensor класс полизаполнения css-element-query из

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

Это позволяет вам вызывать функцию javascript для изменения размера для всех типов элементов, а не только для window, Он устанавливает реальный датчик, а не JavaScript setTimeout опрос.

Используйте это так:

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

Поддерживаемые браузеры: все вкл. IE6+.

Answer 5

Мне это показалось очень хорошо:

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

"Используйте комбинацию mousedown, mousemove и / или mouseup"

согласно ответу Феликса.

Особенно полезно при объединении настраиваемой панели результатов поиска с представлением прокрутки Dev Extremes, и вам нужен полный контроль над ним.

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

Answer 6

Согласно этому сайту он работает только в Internet Explorer 9.

Попробуйте эту скрипку: http://jsfiddle.net/maniator/3Zva3/