Resizing an element triggers the resize event of the window

Question

Looks like that when resizing an HTML element, the windows' resize event gets fired as well.

Since I want to execute different logic when resizing elements and when the window gets resized, is there a non-hackish way of dealing with 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 gets fired for all of it's parents even if their size doesn't change

use event.stopPropagation(); http://api.jquery.com/event.stopPropagation — Daniel, Apr 09 '13 at 13:15
The "resize" event bubbles up to the window object unless you stop the propagation. — Donald T, Apr 09 '13 at 19:16
I think this is a bug in jQueryUI resizable, which triggers the window resize event without regard for the return value or stop propagation states. — Doug, Sep 29 '13 at 15:31
See http://bugs.jqueryui.com/ticket/7514. It seems the jquery community has closed this and other related bugs. I opened a new ticket as a feature request to fix this to work as expected. Please vote for the improvement: http://bugs.jqueryui.com/ticket/9580. — Doug, Sep 30 '13 at 12:46

Daniel · Accepted Answer · 2013-04-09T16:09:47.327

Base on other information I think this one 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: alternative and "more elegant" solution

Although the above solution works flawless, I was not satisfied with having to manage outside the resizable() widget. And it does not have to be. After digging a little deeper, it is possible to stop the propagation within the "create" phase. To show this solution I am adding it to this previous one.

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

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

score 5 · Answer 2 · answered Apr 09 '13 at 13:20

5

Use e.target:

SEE DEMO

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

answered Apr 09 '13 at 13:20

A. Wolff

74,033
9
94
155

This is not the question. Apparently the window resizes is what @Loupax asks. You are making a condition whether you want to read that or not. – Daniel Apr 09 '13 at 13:24
1

"Since I want to execute different logic when resizing elements and when the window gets resized" My answer answering that statement. But you are right about this: "the problem is that when I resize an element, the resize event gets fired for all of it's parents even if their size doesn't change" Here solution should be to use event.stopPropagation(); on each handler of resizable element. – A. Wolff Apr 09 '13 at 13:28
Yeah, but the interesting part is where to implement that. (???) .. I tried with the documentation, but with no luck so far. You are right, I was intrigued by the behavior that I missed reading that part on the logic. – Daniel Apr 09 '13 at 13:35

score 2 · Answer 3 · answered Apr 09 '13 at 13:28

2

Works for me Demo

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

answered Apr 09 '13 at 13:28

b0zar

41
3

score 2 · Answer 4 · edited May 23 '17 at 11:53

According to http://www.quirksmode.org/dom/events/resize.html the resize event is available on the window, but not on the document or other elements (if we ignore some exceptions mentioned at that page).

So it is really unexpectable that changing width and/or height of some element using resizable() causes:
1) resize event firing at all
2) resize event bubbling up to the window object

If I want to make only $('#elem') resizable, that's all I want. Not any bubbling or window resize event firing.

I made a one line change to the example fiddle (and updated the libraries a bit more recent versions):

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: The problem in other solutions on this page (and also here) is that bubbling up to the window and firing the window's resize event causes unnecessary overhead if you just want to resize some div or so.

EDIT2: Because widgetEventPrefix is an internal parameter, it's name can change, it can be removed and it's behavior can be changed in new releases of jQuery UI. So, when upgrading UI, check that this works like before.

score 1 · Answer 5 · answered Apr 09 '13 at 13:29

Accept e as the first argument to your anonymous function.

It will be the jQuery Event Object with which you can stop the propagation of the event using e.stopPropagation (as suggested by Daniel in the comments above).

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

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

PPK has a great write up about Event Order explaining event bubbling and capturing, which is what is causing you trouble here. http://www.quirksmode.org/js/events_order.html

resize basing on element doesnt work ```$(#my_element).on('resize'``` — Alexey Nikonov, Aug 15 '19 at 15:47

score 1 · Answer 6 · answered Jan 10 '17 at 00:15

If you just need to differentiate between Browser resizing and Element resizing, you can check the 'bubbles' property of the event (e):

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

When the Browser is resized, e.bubbles is False (because it's the top-level entity), but when any Document Element is resized, e.bubbles will be True.

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

This was exactly what I was looking for. stopPropagation does not always work like others are suggesting. Thank you. — WebDevNerdStuff, Feb 16 '21 at 19:42

score 0 · Answer 7 · answered Sep 21 '16 at 05:40

0

This is a bug in jQuery core, But it Can be workarounded with target checking

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

answered Sep 21 '16 at 05:40

Karthick Kumar

1,217
1
25
38

Resizing an element triggers the resize event of the window

7 Answers7

Linked