Trình duyệt chéo: phát hiện sự kiện mờ trên cửa sổ

Question

Tôi chỉ đọc, tôi nghĩ rằng tất cả các chuỗi đề cập đến chủ đề này và tôi không thể tìm thấy giải pháp thực sự cho vấn đề của mình. Tôi cần phát hiện khi cửa sổ trình duyệt mất tiêu điểm, tức là sự kiện mờ. Tôi đã thử tất cả các tập lệnh trên stackoverflow, nhưng dường như không có cách tiếp cận trình duyệt chéo phù hợp.

Firefox là trình duyệt có vấn đề ở đây.

Một cách tiếp cận phổ biến sử dụng jQuery là:

window.onblur = function() { 
    console.log('blur'); 
} 
//Or the jQuery equivalent: 
jQuery(window).blur(function(){ 
    console.log('blur'); 
}); 

này hoạt động trong Chrome, IE và Opera, nhưng Firefox không phát hiện sự kiện này.

Có cách nào để duyệt qua sự kiện làm mờ cửa sổ không? Hoặc, được hỏi khác, có cách nào để phát hiện sự kiện làm mờ cửa sổ bằng trình duyệt Firefox không? hỗ trợ

• Xem Firefox 3 window focus and blur
• Theo các bài viết github sau, jQuery đã ngưng để thử nghiệm mờ Firefox::

  ---

  câu hỏi liên quan và nghiên cứu

  • https://github.com/jquery/jquery/pull/1423
  • http://bugs.jquery.com/ticket/13363

Answer 1

Bạn có thể sử dụng phương pháp mờ jQuery trên cửa sổ, như vậy:

$(document).ready(function() { 
    $(window).blur(function() { 
    // Put your blur logic here 
    alert("blur!"); 
    }); 
}); 

này hoạt động trong Firefox, IE, Chrome và Opera.

Answer 2

Dường như jQuery không còn hỗ trợ những thử nghiệm này cho FireFox:

• jQuery vé lỗi là ở đây: http://bugs.jquery.com/ticket/13363
• jQuery gần/deprecation cam kết là ở đây: https://github.com/jquery/jquery/pull/1423

tôi đang tìm kiếm cho một cách tốt hơn để hỗ trợ Firefox blur eventing, nhưng cho đến khi tôi tìm thấy một cách tiếp cận tốt hơn, đây là một trạng thái hiện tại tương đối so với câu trả lời được chấp nhận ban đầu.

Answer 3

document.hasFocus (MDN) là một triển khai có thể giải quyết vấn đề với Firefox, nhưng trong Opera nó không được hỗ trợ. Vì vậy, một cách tiếp cận kết hợp có thể tiếp cận vấn đề bạn đang gặp phải.

Hàm dưới đây minh họa cách bạn có thể sử dụng phương pháp này:

function getDocumentFocus() { 
    return document.hasFocus(); 
} 

Kể từ câu hỏi của bạn là không đủ rõ ràng về các ứng dụng (timed, pub/sub hệ thống, sự kiện điều khiển, vv), bạn có thể sử dụng chức năng ở trên theo nhiều cách.

Ví dụ: xác minh theo thời gian có thể giống như xác minh được thực hiện trên fiddle này (JSFiddle).

Answer 4

tôi đã cố gắng sử dụng addEventListener DOM chức năng

window.addEventListener('blur', function(){console.log('blur')}); 
window.addEventListener('click', function(event){console.log(event.clientX)}); 

tôi đã nhận nó để làm việc sau khi mờ đầu tiên. nhưng nó không hoạt động khi tôi không có chức năng bấm vào nó. Có thể có một số loại refresh điều đó xảy ra khi một chức năng nhấp chuột được hiểu

Answer 5

tôi đã cố gắng cả hai:

document.addEventListener('blur', function(){console.log('blur')}); 

và

window.addEventListener('blur', function(){console.log('blur')}); 

và cả hai đều làm việc trong phiên bản của tôi về FF (33,1).

Đây là jsfiddle: http://jsfiddle.net/hzdd06eh/

Bấm bên trong cửa sổ "chạy" và sau đó nhấp vào bên ngoài nó để kích hoạt hiệu ứng.

Answer 6

Đây là giải pháp thay thế cho câu hỏi của bạn nhưng nó sử dụng Page Visibility API và Giải pháp tương thích Cross Browser.

(function() { 
    var hidden = "hidden"; 

    // Standards: 
    if (hidden in document) 
     document.addEventListener("visibilitychange", onchange); 
    else if ((hidden = "mozHidden") in document) 
     document.addEventListener("mozvisibilitychange", onchange); 
    else if ((hidden = "webkitHidden") in document) 
     document.addEventListener("webkitvisibilitychange", onchange); 
    else if ((hidden = "msHidden") in document) 
     document.addEventListener("msvisibilitychange", onchange); 
    // IE 9 and lower: 
    else if ("onfocusin" in document) 
     document.onfocusin = document.onfocusout = onchange; 
    // All others: 
    else 
     window.onpageshow = window.onpagehide = window.onfocus = window.onblur = onchange; 

    function onchange(evt) { 
     var v = "visible", 
      h = "hidden", 
      evtMap = { 
       focus: v, 
       focusin: v, 
       pageshow: v, 
       blur: h, 
       focusout: h, 
       pagehide: h 
      }; 

     evt = evt || window.event; 
     if (evt.type in evtMap) { 
      console.log(evtMap[evt.type]); 
     } else { 

      console.log(this[hidden] ? "hidden" : "visible"); 
     } 
    } 

    // set the initial state (but only if browser supports the Page Visibility API) 
    if (document[hidden] !== undefined) 
     onchange({ 
      type: document[hidden] ? "blur" : "focus" 
     }); 
})();