jquery - 调整元素大小会触发窗口的调整大小事件

Question

看起来，当调整 HTML 元素的大小时，窗口的调整大小事件也会被触发。

由于我想在调整元素大小时和调整窗口大小时执行不同的逻辑，是否有一种非黑客的方法来处理这个问题？

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

换句话说，问题是当我调整一个元素的大小时，它的所有父元素的调整大小事件都会被触发，即使它们的大小没有改变

Answer 1

根据其他信息，我认为这反射(reflect)了窗口的行为。

$(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/

编辑:替代和“更优雅”的解决方案

尽管上述解决方案工作完美，但我对必须在 resizing() 小部件之外进行管理感到不满意。但事实并非如此。深入挖掘后，可以在“创建”阶段停止传播。为了展示这个解决方案，我将其添加到上一个解决方案中。

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

更新了 fiddle : http://jsfiddle.net/djwave28/CPUwW/9/