跨瀏覽器的瀏覽器後退按鈕事件偵測
由於其非同步性質,偵測瀏覽器後退按鈕的行為帶來了挑戰。雖然存在一些方法,例如利用 window.onhashchange,但它們無法區分觸發雜湊更改的頁內元素和實際的後退按鈕按下。
強制使用頁內後退按鈕
在依賴雜湊導航的單頁應用程式中,調節後退按鈕的功能至關重要。透過使用修改雜湊值的頁內後退按鈕,您可以保持對導航的控制。
發現瀏覽器後退按鈕按下
準確偵測瀏覽器後退按鈕事件,考慮使用滑鼠懸停並在文件上留下事件的跨平台方法。
document.onmouseover = function() { // User's cursor is within the document area window.innerDocClick = true; } document.onmouseleave = function() { // User's cursor has exited the document area window.innerDocClick = false; } window.onhashchange = function() { if (window.innerDocClick) { // Navigation triggered by in-page action } else { // Browser back button was pressed } }
此方法設定布林標誌(window.innerDocClick) 指示遊標是否在文件區域內。如果雜湊值變更而標誌為 false,則建議按下瀏覽器後退按鈕。
防止退格鍵觸發後退事件
防止退格鍵啟動回傳按鈕,使用下列jQuery 程式碼:
$(function(){ var rx = /INPUT|SELECT|TEXTAREA/i; $(document).bind("keydown keypress", function(e){ if( e.which == 8 ){ // 8 == backspace if(!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly ){ e.preventDefault(); } } }); });
此程式碼攔截退格鍵並防止它們觸發返回如果焦點不在輸入欄位上,則發生按鈕事件。
以上是如何可靠地偵測不同瀏覽器之間的瀏覽器後退按鈕按下情況?的詳細內容。更多資訊請關注PHP中文網其他相關文章!