Il ridimensionamento di un elemento attiva l'evento di ridimensionamento della finestra

Question

Sembra che quando si ridimensiona un elemento HTML, anche l'evento di ridimensionamento delle finestre venga attivato.

Dal momento che voglio eseguire una logica diversa durante il ridimensionamento degli elementi e quando la finestra viene ridimensionata, esiste un modo non ostico di affrontare questo?

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();  
}); 

In altre parole, il problema è che quando ho ridimensionare un elemento, l'evento resize viene licenziato per tutto questo i genitori, anche se le loro dimensioni non cambia

Answer 1

Base su altre informazioni Penso che questo rifletta il comportamento della finestra.

$(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: alternative e "più elegante" soluzione

Anche se la soluzione di cui sopra funziona impeccabile, non ero soddisfatto di dover gestire al di fuori del widget di ridimensionabile(). E non deve essere. Dopo aver scavato un po 'più a fondo, è possibile interrompere la propagazione all'interno della fase "crea". Per mostrare questa soluzione lo aggiungo a questo precedente.

$(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(); 
      }); 
     } 
    }); 
}); 

violino aggiornamento:http://jsfiddle.net/djwave28/CPUwW/9/

Answer 2

Utilizzare e .target:

SEE DEMO

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

Answer 3

funziona per me Demo

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

Answer 4

Accetto e come primo argomento alla funzione anonima.

Sarà lo jQuery Event Object con cui è possibile interrompere la propagazione dell'evento utilizzando e.stopPropagation (come suggerito da Daniel nei commenti sopra).

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

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

PPK ha una grande scrittura fino a circa Ordina evento spiegando spumeggiante evento e la cattura, che è quello che sta causando problemi qui. http://www.quirksmode.org/js/events_order.html

Answer 5

Secondo http://www.quirksmode.org/dom/events/resize.html l'evento resize è disponibile sulla finestra, ma non sul documento o di altri elementi (se ignoriamo alcune eccezioni menzionate a quella pagina).

così è davvero unexpectable che cambiando larghezza e/o altezza di qualche elemento utilizzando ridimensionabile() provoca:
1) ridimensionare evento a sparare a tutti
2) ridimensionare evento zampillante per l'oggetto window

Se voglio ridimensionare solo $ ('# elem'), è tutto ciò che voglio. Non c'è nessun bubbling o window resize.

Ho fatto un cambiamento di una riga all'esempio violino (e aggiornato le librerie versioni un po 'più recente):

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: Il problema in altre soluzioni in questa pagina (e anche here) è che ribollire fino alla finestra e sparare all'evento di ridimensionamento della finestra causa un sovraccarico non necessario se si desidera semplicemente ridimensionare un div o così.

EDIT2: poiché widgetEventPrefix è un parametro interno, il suo nome può cambiare, può essere rimosso e il suo comportamento può essere modificato nelle nuove versioni dell'interfaccia utente di jQuery. Quindi, durante l'aggiornamento dell'interfaccia utente, controlla che funzioni come prima.

Answer 6

Si tratta di un bug in jQuery core, ma può essere aggirare il problema con il controllo di destinazione

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

Answer 7

Se avete solo bisogno di distinguere tra il ridimensionamento del browser ed Element ridimensionamento, è possibile controllare di proprietà della manifestazione il 'bolle' (e):

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

quando il browser viene ridimensionata, e.bubbles è falsa (perché è l'entità di livello superiore), ma quando un qualsiasi elemento del documento viene ridimensionata, e.bubbles sarà vero.

Ho provato questo in Chrome ... con altri browser, YMMV.