sự kiện orientationchange bắn cuộn và thay đổi kích thước sự kiện

Question

Đối với một dự án tôi đang làm việc, tôi gặp phải một vấn đề lạ, mà tôi không thể tìm thấy câu trả lời ở đây (hoặc bất cứ nơi nào khác).

Tôi đã thử tạo Fiddle để chứng minh điều gì xảy ra, nhưng do tính chất của tập lệnh của tôi và cách hàm jsfiddle hoạt động, nó không hoạt động chính xác. Dù sao, here's a link to the Fiddle vì vậy ít nhất bạn sẽ có mã.

Những gì tôi muốn xảy ra

Execute một handler duy nhất (onViewportChange) trên ba có thể window sự kiện: resize, orientationchange và scroll. Dựa trên loại sự kiện, trình xử lý sẽ tìm ra việc cần làm. Nghe khá đơn giản.

Những gì tôi đã làm

Đối với ví dụ này, tôi đã giới hạn các handler để echo loại sự kiện, cho mục đích thử nghiệm:

var onViewportChange = function(e) { 
    alert(e.type); 
}; 

tôi ràng buộc handler cho sự kiện: (Tôi có cũng đã thử .bind() với một loạt sự kiện và một số liên kết riêng biệt)

$(window).on({ 
    'orientationchange resize scroll' : function(e){ 
     onViewportChange(e); 
    } 
}); 

HTML hoàn tất ely trống rỗng, ngoại trừ cho các yếu tố cơ sở tùy ý (DOCTYPE, html, cơ thể và ofcourse jquery và kịch bản này)

Điều gì thực sự xảy ra

Và bây giờ nó được kỳ lạ: những sự kiện bắn tốt trên các trình duyệt máy tính để bàn (chủ yếu do thiếu sự kiện định hướng bắn), nhưng không phải trên thiết bị di động (được thử nghiệm trên iOS6 + iPad thế hệ thứ 3 và iOS6 + iPhone 5). Khi tôi xoay (các) thiết bị của mình;

• iPad và iPhone lửa cả ba: orientationchange, resize Tiếp theo scroll
• Chrome trên iPhone bắn resize Tiếp theo orientationchange điện thoại
• Một Android tôi mượn gây nên orientationchange tiếp theo resize

(Lưu ý rằng thứ tự các sự kiện có thể không chính xác do điều kiện chủng tộc.)

Và đây là lý do tại sao tôi liên kết nó với sự kiện orientationchange: Khi tôi loại bỏ các orientationchange sự kiện (rời resize và scroll), chỉ có các sự kiện scroll được bắn vào vòng xoay thiết bị, nhưng không còn là sự kiện resize.

Tôi không hiểu tại sao tất cả các sự kiện lại phát sinh cùng một lúc. Ít nhất; Tôi có thể tưởng tượng rằng resize được kích hoạt trên orientationchange vì kích thước cửa sổ thay đổi, nhưng là scroll?

Có ai biết tại sao điều này xảy ra không?

chỉnh sửa tôi đã thiết lập một bản demo ở đây: http://beta.hnldesign.nl/orientation/index.html

Answer 1

Hmmmm, cố gắng này (chiết xuất từ ​​tài liệu jQuery API ...) http://api.jquery.com/on/

$(window).on({ 
    orientationchange: function(e) { 
    onViewportChange(e); 
    }, resize: function(e) { 
    onViewportChange(e); 
    }, scroll: function(e) { 
    onViewportChange(e); 
    } 
}); 

này nên làm việc ... có lẽ bạn cần phải chỉnh sửa mã nhiều hơn một chút