Cửa sổ kích hoạt thay đổi kích thước cửa sổ bật lửa jQuery UI

Question

Tôi có 2 sự kiện, một để phát hiện thay đổi kích thước cửa sổ và một để phát hiện điểm dừng có thể thay đổi kích thước của div.

Nhưng khi tôi thay đổi kích thước div, trong bảng điều khiển sẽ phát hiện sự kiện thay đổi kích thước cửa sổ.

Có cách nào để chặn điều này không?

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

Ví dụ: http://jsfiddle.net/qwjDz/1/

Answer 1

Bạn thấy hành vi này vì sự kiện bọt. Một cách giải quyết: kiểm tra nguồn gốc của các sự kiện trong callback sử dụng event.target:

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

Demo: http://jsfiddle.net/mattball/HEfM9/

---

Một giải pháp khác là thêm một handler resize đến thay đổi kích thước và ngăn chặn lan truyền của sự kiện lên cây DOM (đó là "bong bóng"). (Edit: này nên làm việc, nhưng đối với một số lý do không:. http://jsfiddle.net/mattball/5DtdY)

Answer 2

Tôi nghĩ rằng thực sự là an toàn nhất sẽ được thực hiện như sau:

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

Answer 3

Đối với tôi, với JQuery 1,7 .2 không có giải pháp nào được đề xuất ở đây. Vì vậy, tôi đã phải đưa ra một chút khác nhau mà hoạt động trên các trình duyệt cũ IE cũng như 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"); 
}); 

này có thể phải được điều chỉnh nếu các yếu tố thay đổi kích cỡ là cái gì khác hơn là một <div>

Answer 4

Tất cả những câu trả lời này sẽ không giúp ích gì. Vấn đề là thay đổi kích thước sự kiện bong bóng lên đến cửa sổ. Vì vậy, cuối cùng e.target sẽ là cửa sổ ngay cả khi thay đổi kích thước đã xảy ra trên div. Vì vậy, câu trả lời thực sự là để chỉ đơn giản dừng lại tuyên truyền các sự kiện thay đổi kích thước:

$("#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