javascript - example - panel colapsable jquery

Evento de redimensionamiento de la ventana de fuego de jQuery UI

Question

Tengo 2 eventos, uno para detectar el cambio de tamaño de la ventana y otro para detectar la parada redimensionable de div.

Pero cuando cambio el tamaño del div, en la consola detecto el evento de cambio de tamaño de la ventana.

¿Hay alguna forma de bloquear esto?

$(document).ready(function(){
     $(window).bind(''resize'', function(){
        console.log("resize");    
     }); 
     $(".a").resizable();
 });

Ejemplo: http://jsfiddle.net/qwjDz/1/

Answer 1

Creo que en realidad lo más seguro sería hacer lo siguiente:

$(window).bind(''resize'', function(event) {
    if (this == event.target) {
        console.log("resize");
    }
});

Answer 2

Para mí, con JQuery 1.7.2, ninguna de las soluciones propuestas aquí funcionó. Así que tuve que encontrar uno ligeramente diferente que funcione en los navegadores IE más antiguos, así como en Chrome ...

$(window).bind(''resize'', function(event) {
    if ($(event.target).prop("tagName") == "DIV") {return;}  // tag causing event is a div (i.e not the window)
    console.log("resize");
});

Esto podría tener que adaptarse si el tamaño del elemento es algo más que un <div>

Answer 3

Todas estas respuestas no van a ayudar. El problema es que cambiar el tamaño de las burbujas de eventos hasta la ventana. Así que eventualmente el objetivo e será la ventana, incluso si el cambio de tamaño ocurrió en el div. Así que la respuesta real es simplemente dejar de propagar el evento de cambio de tamaño:

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

Answer 4

Usted ve este comportamiento debido a un evento burbujeante. Una solución alternativa: verifique el origen del evento en la devolución de llamada usando event.target :

$(window).bind(''resize'', function(event) {
    if (!$(event.target).hasClass(''ui-resizable'')) {
        console.log("resize");
    }
});

Demostración: http://jsfiddle.net/mattball/HEfM9/

Otra solución es agregar un controlador de cambio de resize al tamaño variable y detener la propagación del evento en el árbol DOM (que es el "burbujeo"). ( Edición: esto debería funcionar, pero por alguna razón no lo hace: http://jsfiddle.net/mattball/5DtdY ).

Answer 5

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

http://bugs.jqueryui.com/ticket/7514