Question

在调整HTML元素的大小时，看起来就是这样。 resize事件也会被触发。

因为我想在调整元素大小时执行不同的逻辑，并且当窗口调整大小时，是否有一种非黑客的处理方法？

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

SEE DEMO

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

Answer 3

适合我Demo

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

Answer 4

根据http://www.quirksmode.org/dom/events/resize.html，resize事件在窗口中可用，但不在文档或其他元素上（如果我们忽略该页面提到的一些例外）。

因此，使用resizable（）改变某个元素的宽度和/或高度是非常不可思议的：
1）全部重新调整事件 2）调整冒泡到窗口对象的事件

如果我只想让$（'＃elem'）可调整大小，那就是我想要的。没有任何冒泡或窗口调整大小事件。

我对示例小提琴进行了一行更改（并更新了更新版本的库）：

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

编辑：此页面上的其他解决方案（以及here）中的问题是冒泡到窗口并触发窗口的resize事件会导致不必要的开销，如果你只是想调整一些div左右。 / p>

EDIT2：因为widgetEventPrefix是一个内部参数，它的名称可以更改，可以删除它，并且可以在新版本的jQuery UI中更改它的行为。因此，在升级UI时，请检查其是否像以前一样。

Answer 5

接受e作为匿名函数的第一个参数。

使用e.stopPropagation可以使用jQuery Event Object来阻止事件的传播（正如Daniel在上面的评论中所建议的那样）。

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

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

PPK对事件顺序有很好的解释，解释事件冒泡和捕获，这就是导致你麻烦的原因。 http://www.quirksmode.org/js/events_order.html

Answer 6

这是jQuery core中的错误，但它可以与目标检查相结合

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

Answer 7

如果您只是需要区分浏览器大小调整和元素大小调整，您可以检查“气泡”＆＃39;事件的属性（e）：

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

调整浏览器大小时，e.bubbles为False（因为它是顶级实体），但是当调整任何文档元素大小时，e.bubbles将为True。

我已经在Chrome中测试了这个...与其他浏览器YMMV。

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

7 个答案: