6

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

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

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 事件也会为它的所有父级触发

4

7 回答 7

12

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

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

于 2013-04-09T13:50:34.020 回答
5

使用 e.target：

看演示

$(window).on('resize', function(e){
        if(e.target===this)        
           $('#text').text(++resizes);
    });
于 2013-04-09T13:20:05.543 回答
2

为我工作演示

    if (e.originalEvent.type == 'resize'){
        $('#textWindow').text(++resizesWindow);
    } else {
        $('#text').text(++resizes);
    }
于 2013-04-09T13:28:50.527 回答
2

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

因此，使用 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();    
});

编辑：此页面（以及此处）其他解决方案中的问题是，如果您只想调整某些 div 左右的大小，那么冒泡到窗口并触发窗口的调整大小事件会导致不必要的开销。

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

于 2015-05-20T12:45:29.940 回答
1

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

它将是jQuery 事件对象，您可以使用它来停止使用 e.stopPropagation 传播事件（正如 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

于 2013-04-09T13:29:03.530 回答
1

如果您只需要区分浏览器大小调整和元素大小调整，可以检查事件 (e) 的 'bubbles' 属性：

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

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

我已经在 Chrome 中对此进行了测试……与其他浏览器 YMMV。

于 2017-01-10T00:15:56.800 回答
0

这是jQuery 核心中的一个错误，但可以通过目标检查来解决

$(window).resize(function(e) {
if (e.target == window)
/* do your stuff here */;
})
于 2016-09-21T05:40:07.787 回答