如何在用戶點擊返回按鈕或正在離開時執行功能。以及如何延遲它？

Question

我有一個彈出窗口，我希望它顯示當用戶點擊返回按鈕或正在離開，是否有一種方法來延遲離開或返回到前一頁的時間？

這裏是彈出代碼：

<div style="display: block;" id="ouibounce-modal"> 
    <div id="popup"> 
     <div id="close">×</div> 
     <div id="popup_img" class="hos_modal"> 
      <a href="www.google.com/click" 
       onclick="DisableExitTraffic();"><img 
       src="http://placehold.it/500/500"></a> 
     </div> 
    </div> 
</div> 
<script type="text/javascript"> 
    // if you want to use the 'fire' or 'disable' fn, 
    // you need to save OuiBounce to an object 

    $("#ouibounce-modal").show(); 
    var _ouibounce = ouibounce(document.getElementById('ouibounce- 
     modal'), { 
     aggressive: true, 
     timer: 0, 
     callback: function() { console.log('ouibounce fired!'); } 
    }); 

    $('body').on('click', function() { 
     $('#ouibounce-modal').hide(); 
    }); 

    $('#ouibounce-modal .modal-footer').on('click', function() { 
     $('#ouibounce-modal').hide(); 
    }); 

    $('#ouibounce-modal .modal').on('click', function (e) { 
     e.stopPropagation(); 
    }); 



    $("#close").click(function() { 
     $("#popup").hide(); 

    });} 
</script> 

Answer 1

您可以收聽通過popstate事件添加事件偵聽器的後退按鈕或用戶離開頁面。

在你的情況下，它會是這個樣子：

window.onpopstate = function(event) { 
    event.preventDefault(); 
    $("#ouibounce-modal").show(); 
}; 

有關詳情，請https://developer.mozilla.org/en-US/docs/Web/Events/popstate

Answer 2

你可以做下面的拖延執行

$('body').on('click', function() { 
    setTimeout(function(){ 
     $('#ouibounce-modal').hide(); 
    }, 1000) 
}); 

$('#ouibounce-modal .modal-footer').on('click', function() { 
    setTimeout(function(){ 
     $('#ouibounce-modal').hide(); 
    }, 1000) 
}); 

$('#ouibounce-modal .modal').on('click', function (e) { 
    e.stopPropagation(); 
}); 



$("#close").click(function() { 
    setTimeout(function(){ 
     $("#popup").hide(); 
    }, 1000) 
});} 

請注意，您可以通過傳遞超時值來更改延遲時間（在我的示例中，我已使用1000） 有關setTi請參考https://www.w3schools.com/jsref/met_win_settimeout.asp