jQuery UI 可调整大小的火窗口调整大小事件

Question

我有 2 个事件，一个用于检测窗口大小调整，另一个用于检测 div 的可调整大小的停止。

但是当我调整 div 大小时，在控制台中检测到窗口调整大小事件。

有什么办法可以阻止这个吗？

$(document).ready(function(){
     $(window).bind('resize', function(){
        console.log("resize");    
     }); 
     $(".a").resizable();
 });

示例： http://jsfiddle.net/qwjDz/1/

Answer 1

所有这些答案都没有帮助。问题是调整大小事件会冒泡到窗口。因此，即使调整大小发生在 div 上，最终 e.target 也将是窗口。所以真正的答案是停止传播调整大小事件：

$("#mydiv").resizable().on('resize', function (e) {
    e.stopPropagation(); 
});

Answer 2

您会看到此行为是由于事件冒泡。一种解决方法：使用 event.target 检查回调中的事件源：

$(window).bind('resize', function(event) {
    if (!$(event.target).hasClass('ui-resizable')) {
        console.log("resize");
    }
});

演示：http://jsfiddle .net/mattball/HEfM9/

---

另一个解决方案是向可调整大小的对象添加一个 resize 处理程序，并停止事件在 DOM 树上的传播（即“冒泡”）。（编辑：这应该有效，但由于某种原因不起作用：http: //jsfiddle.net/mattball/5DtdY。）

Answer 3

我认为实际上最安全的方法是执行以下操作：

$(window).bind('resize', function(event) {
    if (this == event.target) {
        console.log("resize");
    }
});

Answer 4

对我来说，对于 JQuery 1.7.2，这里提出的解决方案都不起作用。因此，我必须想出一个稍微不同的浏览器，它可以在较旧的 IE 浏览器以及 Chrome 上运行...

$(window).bind('resize', function(event) {
    if ($(event.target).prop("tagName") == "DIV") {return;}  // tag causing event is a div (i.e not the window)
    console.log("resize");
});

如果调整大小的元素不是

，则可能需要进行调整

Answer 5

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

http://bugs.jqueryui.com/ticket/7514