Loupax Loupax - 2 months ago 8
jQuery Question

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

Answer

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/