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

Question

看起来在调整HTML元素大小时,windows的resize事件也会被触发.

因为我想在调整元素大小时执行不同的逻辑,并且当窗口调整大小时,是否有一种非hackish方式来处理它？

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

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

Answer 1

根据其他信息,我认为这反映了窗口的行为.

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

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

虽然上面的解决方案完美无瑕,但我不满足于在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/

Answer 2

使用e.target:

看看演示

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