2013-04-09 49 views
5

Có vẻ như khi thay đổi kích thước một phần tử HTML, sự kiện thay đổi kích thước của cửa sổ cũng được kích hoạt.Thay đổi kích thước một phần tử kích hoạt sự kiện thay đổi kích thước của cửa sổ

Vì tôi muốn thực thi logic khác nhau khi thay đổi kích thước các phần tử và khi cửa sổ được thay đổi kích thước, có cách nào không liên quan đến vấn đề này không?

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

Nói cách khác, vấn đề là khi tôi thay đổi kích thước một yếu tố, sự kiện thay đổi kích thước bị sa thải vì tất cả các bậc cha mẹ của nó ngay cả khi kích thước của chúng không thay đổi

+2

sử dụng event.stopPropagation(); http://api.jquery.com/event.stopPropagation – Daniel

+1

Sự kiện "thay đổi kích thước" sẽ bong bóng lên đến đối tượng cửa sổ trừ khi bạn dừng quá trình truyền. –

+1

Tôi nghĩ rằng đây là một lỗi trong jQueryUI có thể thay đổi kích thước, kích hoạt sự kiện thay đổi kích thước cửa sổ mà không quan tâm đến giá trị trả lại hoặc dừng trạng thái tuyên truyền. – Doug

Trả lời

9

Dựa trên các thông tin khác, tôi nghĩ điều này phản ánh hành vi của cửa sổ.

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

Chỉnh sửa: thay thế và "thanh lịch hơn" giải pháp

Mặc dù các giải pháp trên hoạt động hoàn hảo, tôi đã không hài lòng với việc phải quản lý bên ngoài() Widget thay đổi kích thước. Và nó không phải là. Sau khi đào sâu hơn một chút, nó có thể ngăn chặn sự lan truyền trong giai đoạn "tạo". Để hiển thị giải pháp này, tôi sẽ thêm nó vào phiên bản trước đó.

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

cập nhật fiddle:http://jsfiddle.net/djwave28/CPUwW/9/

+0

Công cụ tuyệt vời. Cảm ơn bạn – ALFmachine

5

Sử dụng e .target:

SEE DEMO

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

Đây không phải là câu hỏi. Rõ ràng cửa sổ thay đổi kích cỡ là những gì @Loupax hỏi. Bạn đang tạo điều kiện cho dù bạn muốn đọc hay không. – Daniel

+0

"Vì tôi muốn thực hiện logic khác nhau khi thay đổi kích thước các phần tử và khi cửa sổ được thay đổi kích thước" Câu trả lời của tôi trả lời câu lệnh đó. Nhưng bạn đúng về điều này: "vấn đề là khi tôi thay đổi kích thước một phần tử, sự kiện thay đổi kích thước được kích hoạt cho tất cả cha mẹ của nó ngay cả khi kích thước của chúng không thay đổi" Giải pháp ở đây nên sử dụng event.stopPropagation(); trên mỗi bộ xử lý của phần tử có thể thay đổi kích thước. –

+0

Vâng, nhưng phần thú vị là nơi để thực hiện điều đó. (???) .. Tôi đã thử với các tài liệu, nhưng không có may mắn cho đến nay. Bạn nói đúng, tôi bị hấp dẫn bởi hành vi mà tôi đã bỏ lỡ khi đọc phần đó trên logic. – Daniel

2

Làm việc cho tôi Demo

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

Chấp nhận e như là đối số đầu tiên chức năng ẩn danh của bạn.

Đây sẽ là jQuery Event Object mà bạn có thể ngừng tuyên truyền sự kiện bằng e.stopPropagation (như đề xuất của Daniel trong các nhận xét ở trên).

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

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

PPK viết rất hay về sự kiện giải thích sự kiện bong bóng và chụp, đó là nguyên nhân khiến bạn gặp rắc rối ở đây. http://www.quirksmode.org/js/events_order.html

2

Theo http://www.quirksmode.org/dom/events/resize.html sự kiện thay đổi kích thước có sẵn trên cửa sổ, nhưng không phải trên các tài liệu hoặc các yếu tố khác (nếu chúng ta bỏ qua một số trường hợp ngoại lệ nêu tại trang đó).

Vì vậy, nó thực sự là unexpectable rằng việc thay đổi chiều rộng và/hoặc chiều cao của một số yếu tố sử dụng thay đổi kích thước() gây ra:
1) thay đổi kích thước kiện bắn vào tất cả
2) thay đổi kích thước kiện bọt lên đến đối tượng cửa sổ

Nếu tôi muốn chỉ tạo $ ('# elem') có thể thay đổi kích cỡ, đó là tất cả những gì tôi muốn. Không phải bất kỳ sự kiện kích hoạt thay đổi kích thước cửa sổ hoặc bong bóng nào.

tôi đã thực hiện một sự thay đổi một dòng như ví dụ fiddle (và cập nhật các thư viện hơn một chút phiên bản gần đây):

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

EDIT: Vấn đề về các giải pháp khác trên trang này (và cũng here) là bong bóng lên đến cửa sổ và bắn sự kiện thay đổi kích thước của cửa sổ gây ra chi phí không cần thiết nếu bạn chỉ muốn thay đổi kích thước một số div hoặc như vậy.

EDIT2: Vì widgetEventPrefix là một tham số nội bộ, tên của nó có thể thay đổi, nó có thể bị xóa và hành vi của nó có thể được thay đổi trong phiên bản mới của giao diện người dùng jQuery. Vì vậy, khi nâng cấp giao diện người dùng, hãy kiểm tra xem thao tác này có hoạt động như trước không.

0

Đây là một lỗi trong jQuery core, nhưng nó có thể workarounded với mục tiêu kiểm tra

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

Nếu bạn chỉ cần phải phân biệt giữa thay đổi kích thước trình duyệt và phần tử thay đổi kích thước, bạn có thể kiểm tra tài sản của sự kiện này là 'bong bóng' (e):

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

khi trình duyệt được thay đổi kích cỡ, e.bubbles là False (vì đó là tổ chức cấp cao nhất), nhưng khi bất kỳ phần tử tài liệu được thay đổi kích cỡ, e.bubbles sẽ là True.

Tôi đã thử nghiệm tính năng này trong Chrome ... với các trình duyệt khác, YMMV.

Các vấn đề liên quan