jQuery UI的可調整大小的防火窗resize事件

Question

我有兩個事件，一個檢測的窗口大小調整等檢測div的可調整大小的停止。

但是當我調整DIV，在控制檯檢測窗口resize事件。

有什麼辦法來阻止呢？

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

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

Answer 1

你看到因爲事件冒泡的這種行爲。一種解決方法：使用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 2

我覺得其實最安全的是做到以下幾點：

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

Answer 3

對於我來說，用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"); 
}); 

這可能需要進行調整，如果調整該元素是別的東西比<div>

Answer 4

所有這些答案都無濟於事。問題是調整大小的事件冒泡到窗口。所以最終e.target將成爲窗口，即使resize發生在div上。所以，真正的答案是簡單地停止傳播resize事件：

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

Answer 5

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

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