Resizing an element triggers the resize event of the window

问题

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

回答1:

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/

回答2:

Use e.target:

SEE DEMO

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

回答3:

Works for me Demo

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

回答4:

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.

回答5:

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

回答6:

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 */;
})

回答7:

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.

来源：https://stackoverflow.com/questions/15902920/resizing-an-element-triggers-the-resize-event-of-the-window

标签

jquery

jquery-ui

jquery-ui-resizable