首頁(yè) 猿問(wèn) 關(guān)閉（不離開(kāi)）頁(yè)面時(shí)jquery...

關(guān)閉（不離開(kāi)）頁(yè)面時(shí)jquery beforeunload？

JavaScript JQuery

慕妹3146593 2019-08-26 17:48:39

關(guān)閉（不離開(kāi)）頁(yè)面時(shí)jquery beforeunload？如何顯示“您確定要離開(kāi)頁(yè)面嗎？” 當(dāng)用戶實(shí)際嘗試關(guān)閉頁(yè)面時(shí)（單擊瀏覽器窗口或選項(xiàng)卡上的X按鈕），當(dāng)他試圖離開(kāi)頁(yè)面時(shí)（單擊另一個(gè)鏈接）。當(dāng)用戶嘗試關(guān)閉頁(yè)面時(shí)，我的客戶希望顯示一條消息“您確定要離開(kāi)頁(yè)面嗎？您的購(gòu)物車中仍有商品。”不幸的是$(window).bind('beforeunload')，只有當(dāng)用戶關(guān)閉頁(yè)面時(shí)才會(huì)觸發(fā)。jQuery的：function checkCart() { $.ajax({ url : 'index.php?route=module/cart/check', type : 'POST', dataType : 'json', success : function (result) { if (result) { $(window).bind('beforeunload', function(){ return 'leave?'; }); } } })}

查看完整描述

3 回答

波斯汪

TA貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超4個(gè)贊

您可以使用JQuery來(lái)完成此操作。

對(duì)于例如，

<a href="your URL" id="navigate"> click here </a>

你的JQuery意志，

$(document).ready(function(){

    $('a').on('mousedown', stopNavigate);

    $('a').on('mouseleave', function () {
           $(window).on('beforeunload', function(){
                  return 'Are you sure you want to leave?';
           });
    });});function stopNavigate(){    
    $(window).off('beforeunload');}

并獲得離開(kāi)消息警報(bào)，

$(window).on('beforeunload', function(){
      return 'Are you sure you want to leave?';});$(window).on('unload', function(){

         logout();});

此解決方案適用于所有瀏覽器，我已對(duì)其進(jìn)行了測(cè)試。

反對(duì) 回復(fù) 2019-08-26

慕田峪9158850

TA貢獻(xiàn)1794條經(jīng)驗(yàn) 獲得超8個(gè)贊

基本上，該解決方案添加了一個(gè)偵聽(tīng)器來(lái)檢測(cè)鏈接或窗口是否導(dǎo)致卸載事件被觸發(fā)。

var link_was_clicked = false;document.addEventListener("click", function(e) {
   if (e.target.nodeName.toLowerCase() === 'a') {
      link_was_clicked = true;
   }}, true);window.onbeforeunload = function(e) {
    if(link_was_clicked) {
        return;
    }
    return confirm('Are you sure?');}

反對(duì) 回復(fù) 2019-08-26