Właściwość Resize CSS3 może być przypisana do arbitralnych elementów. Szukam sposobu na wykrycie takiej zmiany rozmiaru, powiedzmy, Divs (nie mam nic przeciwko, że działa tylko w Firefoksie):

div {
  resize: horizontal;
  overflow: hidden;
}

Niestety wydarzenie onresize wydaje się być zwolnione na div. Jak mogę wykryć w JavaScript, gdy takim użytkownik-instancjonowany jest zmiana rozmiaru?

Edytuj: fwiw otworzyłem raport o błędach na Mozilli. Jeśli chcesz go śledzić: https://bugzilla.mozilla.org/show_Bug.cgi ? Id = 701648

25
Boldewyn 10 listopad 2011, 20:21

6 odpowiedzi

Najlepsza odpowiedź

Słuchaj DOMAttrModified Wydarzenia. Dostałem pomysł z Ta odpowiedź < A href = "http://jsfiddle.net/robertc/r2nft/" Rel = "NOFollow NefErr"> Ten JSFiddle wydaje się działać w Firefoksie 8 (jeśli otworzysz konsolę).

12
Community 23 maj 2017, 11:55

Zmiana rozmiaru jest jak zmiana stylu. Jako taki można zaobserwować za pomocą mutacyjnegoObserver.

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

let child = document.querySelector('textarea');
observer.observe(child, { attributes: true });
<textarea></textarea>
17
Daniel Darabos 28 czerwiec 2017, 15:39

Ponieważ wydarzenie {x0}} wyraźnie nie działa (obecnie, przynajmniej), możesz spróbować jednej z tych alternatywnych opcji:

  1. Użyj kombinacji mousedown, mousemove i / lub mouseup, aby określić, czy div jest zmieniony / został zmieniony. Jeśli chcesz naprawdę drobnoziarnistą kontrolę, możesz sprawdzić w każdym zdarzeniu mousemove Ile / jeśli div został zmieniony. Jeśli nie potrzebujesz tego, można po prostu używać mousemove i po prostu mierz div w mousedown i mouseup i dowiedzieć się, czy został zmieniony rozmiar w końcowy.
  2. Ankieta co 200ms lub tak (w zależności od potrzeb) i porównaj aktualny rozmiar z ostatnim znanym rozmiarem. Zobacz setTimeout().
6
Felix 10 listopad 2011, 16:34

Możesz użyć klasy ResizeSensor CSS-Element-Element-Fileies z

https://github.com/marcja/csss-Elementies-queries.

Umożliwia wywołanie funkcji JavaScript na zmianach rozmiarów dla wszystkich typów elementów, nie tylko dla window. Ustawia prawdziwy czujnik, a nie JavaScript setTimeout.

Użyj tego w ten sposób:

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

Obsługiwane przeglądarki to: wszystko w tym IE6 +.

3
Marc J. Schmidt 13 wrzesień 2014, 14:37

Wydawało się, że działa dobrze dla mnie:

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

"Użyj kombinacji mousedown, mousemove i / lub myszy"

Zgodnie z odpowiedziami Felixs.

Szczególnie przydatne przy łączeniu niestandardowego panelu wyników wyszukiwania z widokiem przewijania ekstremów dev i chcesz pełnej kontroli nad nim.

$("body").on('mousedown mousemove', ".scrollContainer", function () {
    var h = $(this).height() - 20;
    $(".scrollArea").dxScrollView('instance').option('height', h);
});
0
MarkBeharrell 21 luty 2020, 14:38

Według Ta strona działa tylko W Internet Explorer 9.

Wypróbuj to skrzypce: http://jsfiddle.net/Manator/3zva3/

-1
Naftali aka Neal 10 listopad 2011, 16:35