有條件地阻止錨標記的默認操作的問題

Question

有一個錨標記：inventoryHome將用戶帶到不同的頁面。

如果rateMap的大小大於0，我需要顯示一個確認彈出窗口，確認用戶是否想要放棄未保存的更改。

如果用戶確認放棄，則會調用navigateToInv（）方法。

在下面的代碼中，雖然navigateToInv（）方法被稱爲&，但單擊事件正在觸發，頁面不會導航到新頁面。

<li><a href="<%=request.getContextPath()%>/inventory" id="inventoryHome"> <spring:message code="inventoryTab" /></a></li> 

    $('#inventoryHome').click(function(e) { 
      if (Object.size(rateMap) > 0) { 

       e.preventDefault(); 
       showDiscardConfirmationPopUp(navigateToInv, false); 
      } 
     }); 

    var navigateToInv = function(){ 
     rateMap = new Object(); 
     $('#inventoryHome').trigger('click'); 
    } 

Object.size = function(obj) { 
    var size = 0, key; 
    for (key in obj) { 
     if (obj.hasOwnProperty(key)) size++; 
    } 
    return size; 
}; 

無法確定問題。

Answer 1

我實現一樣：

var navigateToInv = function(){ 
    document.location.href= $("#inventoryHome").attr('href'); 
} 
$('#inventoryHome').click(function(e) { 
    if (Object.keys(ratePopUpMap).length > 0) { 
    e.preventDefault(); 
    showDiscardConfirmationPopUp(navigateToInv, false); 
    } 
}) 

Answer 2

該問題似乎是rateMap從未改變爲<= 0。因此，即使手動調用click()方法，它仍然會遵循禁用默認操作的鏈，這就是爲什麼它不會重定向到所需的頁面。您應該添加另一個始於true的狀態變量，因此它會觸發預設的默認分支，然後在click()的手動調用navigateToInv()之前立即設置爲false。

Answer 3

問題是，在錨標記上調用trigger('click')不會導致它導航到由href值指定的頁面。見this answer。

你要麼必須設置window.location到href值，或更改邏輯，這樣你打電話e.preventDefault()用戶選擇後，纔不放棄更改，就像這樣：

$('#linkId').click(function(e) { 
    if (hasUnsavedChanges() && !confirmDiscard()) { 
     e.preventDefault(); 
    } 
} 

在你的情況下，將是：

$('#inventoryHome').click(function(e) { 
    if (!$.isEmptyObject(rateMap) && !confirm("Discard changes?")) { 
     e.preventDefault(); 
    } 
}