Zmiana rozmiaru elementu wyzwala zdarzenie zmiany rozmiaru okna.

Question

Wygląda, że ​​podczas zmiany rozmiaru elementu HTML zdarzenie resize rozmiaru okna jest również uruchamiane.

Odkąd chcę wykonać inną logikę podczas zmiany rozmiaru elementów i kiedy okno zostanie zmienione, czy istnieje nie-hackowy sposób radzenia sobie z tym?

http://jsfiddle.net/CPUwW/1/

$(function(){ 
    $(window).on('resize', function(){   
      // This event gets fired when the #my_element div gets resized, event if 
      // window doesn't get resized itself 
      $('#text').text(++resizes); 
    }); 

    $('#my_element').resizable();  
}); 

Innymi słowy, problemem jest to, że kiedy rozmiar elementu, zdarzenie Resize zostaje zwolniony do wszystkich jego rodziców, nawet jeśli ich rozmiar nie zmienia

Answer 1

Bazując na innych informacjach Myślę, że ten odzwierciedla zachowanie okna.

$(function() { 
    var resizes = 0; 

    $(window).on('resize', function() { 
     $('#text').text(++resizes); 
    }); 
    $('#my_element').resizable(); 

    $("#my_element").on('resize', function (e) { 
     e.stopPropagation(); 
    }); 

}); 

http://jsfiddle.net/djwave28/CPUwW/7/

Edit: alternatywa i "bardziej eleganckie" rozwiązanie

Chociaż powyższe rozwiązanie działa bez zarzutu, nie byłem zadowolony z konieczności zarządzania poza resizable (widget). I nie musi tak być. Po kopaniu nieco głębiej, można zatrzymać propagację w fazie "tworzenia". Aby pokazać to rozwiązanie, dodajemy je do poprzedniej.

$(function() { 
    var resizes = 0; 

    $(window).on('resize', function() { 
     $('#text').text(++resizes); 
    }); 
    $('#my_element').resizable({ 
     create: function (event, ui) { 
      $(this).parent().on('resize', function (e) { 
       e.stopPropagation(); 
      }); 
     } 
    }); 
}); 

aktualizowane skrzypce:http://jsfiddle.net/djwave28/CPUwW/9/

Answer 2

pomocą e .target:

SEE DEMO

$(window).on('resize', function(e){ 
     if(e.target===this)   
      $('#text').text(++resizes); 
    }); 

Answer 3

działa na mnie Demo

if (e.originalEvent.type == 'resize'){ 
     $('#textWindow').text(++resizesWindow); 
    } else { 
     $('#text').text(++resizes); 
    } 

Answer 4

Zebrane e jako pierwszy argument do swojej anonimowej funkcji.

Będzie to jQuery Event Object, za pomocą którego można zatrzymać propagację wydarzenia za pomocą e.stopPropagation (zgodnie z sugestią Daniela w powyższym komentarzu).

$(function(){ 
    $(#my_element).on('resize', function(e){ 
    e.stopPropagation();  
    $('#text').text(++resizes); 
    }); 

    $('#my_element').resizable();  
}); 

PPK ma świetny napis o zamówieniu zdarzeń, które wyjaśnia bulgotanie i przechwytywanie zdarzeń, co jest przyczyną problemów. http://www.quirksmode.org/js/events_order.html

Answer 5

Według http://www.quirksmode.org/dom/events/resize.html zdarzenie resize jest dostępny na oknie, ale nie na dokumencie lub innych elementów (jeśli pominiemy pewne wyjątki wymienione na tej stronie).

Więc to jest naprawdę nieoczekiwanie bardzo, że zmiana szerokości i/lub wysokości jakiegoś elementu stosując zmienny rozmiar() powoduje:
1) zmiana rozmiaru zdarzenia wypalania w ogóle
2) zmiany rozmiaru zdarzenie propagacji do obiektu window

Jeśli chcę zmienić rozmiar tylko $ ('# elem'), to wszystko czego chcę. Nie ma wypalania żadnych zdarzeń związanych z propagacją rozmiaru bufora ani okna.

zrobiłem zmianę jednej linii na przykład ryba (i aktualizowany bibliotek nieco nowsze wersje):

http://jsfiddle.net/CPUwW/56/

// The following line is the needed change. widgetEventPrefix is 
// originally 'resize'. It have to be changed. 

$.ui.resizable.prototype.widgetEventPrefix = 'myresize'; 

$(function(){ 
    var resizes = 0; 
    $(window).on('resize', function(){   
     $('#text').text(++resizes); 
    }); 
    $('#my_element').resizable();  
}); 

EDIT: Problem w innych rozwiązań na tej stronie (i także here) jest to, że bulgotanie się do okna i uruchamianie okna zmiany rozmiaru zdarzenia powoduje niepotrzebne obciążenie, jeśli chcesz tylko zmienić wielkość elementu div lub tak.

EDIT2: Ponieważ widgetEventPrefix jest parametrem wewnętrznym, jego nazwa może się zmienić, można go usunąć, a jego zachowanie można zmienić w nowych wersjach interfejsu jQuery. Tak więc, aktualizując interfejs użytkownika, sprawdź, czy działa to tak jak poprzednio.

Answer 6

Jest to błąd w jQuery core, ale może być workarounded z cel sprawdzenie

$(window).resize(function(e) { 
if (e.target == window) 
/* do your stuff here */; 
}) 

Answer 7

Jeśli wystarczy rozróżniać zmiany rozmiaru przeglądarki i element zmiany rozmiaru, można sprawdzić własność „Bubbles” imprezy (e):

$(window).resize(function(e) 
    { 
    if (!e.bubbles) 
     { 
     clearTimeout(resizeId); 
     resizeId = setTimeout(doneResizing, 250); 
     } 
    }); 

gdy przeglądarka jest zmieniany, e.bubbles jest false (bo to jednostka najwyższego poziomu), ale gdy każdy element dokumentu jest zmieniany, e.bubbles będzie prawdziwa.

Testowałem to w Chrome ... z innymi przeglądarkami, YMMV.