Hộp thoại jQueryUI cuộn lên trên đầu khi nhấp vào nút đóng trong IE

Question

Nhấp vào thanh tiêu đề hộp thoại khiến IE cuộn trang đến đầu hộp thoại nếu hộp thoại được định vị một phần khỏi trang. Nhưng điều này cũng xảy ra nếu người dùng nhấp vào nút đóng. Điều này có nghĩa là người dùng phải nhấp vào nút đóng hai lần.

$('#divDialog').dialog({height:500, position:[10, 1000]}); 

Tôi tạo ra một jsfiddle để chứng minh: http://jsfiddle.net/e9zAK/

đặt lại vị trí hộp thoại cho đến khi nó là một phần ra khỏi màn hình. Sau đó thử nhấp vào nút đóng. Nó sẽ cuộn trang để vừa, nhưng không thực sự đóng hộp thoại. Điều này dường như không xảy ra trong Firefox hoặc Chrome.

Có cách nào để ghi đè chức năng này không? Tôi không muốn sử dụng vị trí: cố định.

Answer 1

Thêm sự kỳ lạ của IE. Nó gửi sự kiện mousedown, nhưng không phải là mouseup và do đó không phải là sự kiện click. Tôi không biết những gì gây ra điều này, nhưng bạn có thể làm việc xung quanh nó bằng cách gắn một người biết lắng nghe để MouseDown:

$('.ui-dialog-titlebar-close').mousedown(function() { 
    $('#divDialog').dialog('close'); 
}); 

này trông giống như một hack hơi khó chịu, nhưng những dường như là cách tiếp cận phổ biến khi đối phó với IE.

Answer 2

Tôi đến đây vì tôi gặp vấn đề tương tự. Trong trường hợp của tôi nó xảy ra trong Chrome (53.0.2785.143 m, Windows) và được kích hoạt khi nhấp vào nút được đặt bên trong thanh tiêu đề, gây ra một bước nhảy khi trang, với hộp thoại của nó, được cuộn xuống một số (hoặc vài) pixel từ trên cùng, đặt nó lên trên cùng của cửa sổ, và không kích hoạt những gì nút được cho là phải làm. Sau khi một số điều tra, chủ yếu là với sự giúp đỡ của trình gỡ lỗi js Chrome, tôi tìm thấy một người nghe sự kiện trên ui-dialog-titlebar, tương ứng với thanh tiêu đề của hộp thoại và được kích hoạt với sự kiện mousedown (thông tin thêm về dòng circ 9161, tệp jquery-ui.js, jQuery UI v1.9.2; có thể nó được giải quyết trong các phiên bản gần đây). Sau đó rõ ràng là loại bỏ các handler sẽ giải quyết vấn đề, mà tôi đã làm trên các sự kiện open trong các mã khởi thoại:

$(".selector").dialog({ 
    open: function(event,ui){ 
     $(this).parent().find('.ui-dialog-titlebar').unbind('mousedown'); 
    } 
}) 

Lưu ý rằng điều này có lẽ sẽ gây trở ngại trong trường hợp bạn có một số hành động kéo liên quan đến việc thanh tiêu đề, mặc dù.