Geek asks and answers

Resizing an element raises a window resize event

It appears that when you resize the HTML element, the window clipping event also fires.

Since I want to follow a different logic when resizing elements and when the window size changes, is there a non-hacker way to handle this?

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 other words, the problem is that when I resize an element, the resize event is fired for all its parents, even if their size does not change

+5
source share
7 answers

Basics of other information. I think this reflects the behavior of the window.

$(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: an alternative and more elegant solution

, , , resizable(). . , "". , .

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

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

+9

e.target:

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

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

http://www.quirksmode.org/dom/events/resize.html , ( , ).

, , / - resizable() :
1)
2)

$('# elem') , , . .

( ):

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: ( ) , , div .

EDIT2: widgetEventPrefix , , , jQuery. , , .

+2

e .

jQuery, e.stopPropagation( ).

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

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

PPK , , . http://www.quirksmode.org/js/events_order.html

+1

This is a bug in the jQuery core , but it can be a workaround to validate the target.

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

If you just need to distinguish between resizing the browser and resizing the element, you can check the "bubbles" property of event (e):

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

When resizing the browser, e.bubbles is False (because it is a top-level object), but when any element of the document changes, e.bubbles will be True.

I tested this in Chrome ... with other browsers, YMMV.

0
source

More articles:


All Articles