防止其他被運行

Question

我的HTML表單事件處理程序有這個標記：

<fieldset> 
    <legend> 
     <label> <input type="checkbox" class="warnOnUncheck" /> Include the following data </label> 
    </legend> 
    <div class="fieldsetContent"> 
     <!-- and a bunch of <input type="text" /> here. --> 
    </div> 
</fieldset> 

我有由DOM準備叫了兩個腳本：

1. 第一個崩潰的內容當複選框未選中並顯示
2. 第二個顯示一個confirm()確認消息，當複選框未選中時。如果用戶點擊「否」，則複選框被重新檢查。

問題是總是調用第一個事件處理程序，所以即使用戶單擊「否」，字段集內容仍然隱藏。

這裏是我的（有刪節）的jQuery代碼（DOM-ready事件處理過程中調用）：

$("fieldset.collapseable legend input").change(function(event) { 

    var localFieldsetContent = $(this).closest("fieldset").find("div.fieldsetContent"); 

    var checked = $(this).is(":checked"); 
    if(checked && localFieldsetContent.is(":visible")) { 
     // if checked and already visible, then skip entirely. 
     return; 
    } 

    localFieldsetContent.slideToggle(200); 
); 

$("input[type=checkbox].warnOnUncheck").change(function(event) { 

    if(!this.checked) { 

     var message = $(this).data("warnMessage"); 

     var confirmed = confirm(message); 
     if(!confirmed) { 

      this.checked = true; 
      event.stopImmediatePropagation(); 
     } 
    } 

}); 

我認爲event.stopImmediatePropagation();會的工作，但事實並非如此。

如何避免在confirmed爲假時摺疊字段集？

Answer 1

立即解決問題：第一個處理程序的第二個（一個與確認）有機會打電話stopImmediatePropagation之前執行。綁定你的處理程序以相反的順序，它應該工作：

$("input[type=checkbox].warnOnUncheck").change(function(event) { 

    if(!this.checked) { 

     var message = $(this).data("warnMessage"); 

     var confirmed = confirm(message); 
     if(!confirmed) { 

      this.checked = true; 
      event.stopImmediatePropagation(); 
     } 
    } 

}); 

$("fieldset.collapseable legend input").change(function(event) { 

    var localFieldsetContent = $(this).closest("fieldset").find("div.fieldsetContent"); 

    var checked = $(this).is(":checked"); 
    if(checked && localFieldsetContent.is(":visible")) { 
     // if checked and already visible, then skip entirely. 
     return; 
    } 

    localFieldsetContent.slideToggle(200); 
); 

不過，我覺得非常不安全了兩個功能分開這一行爲。

我將兩個處理器合併成一個單一的一個：

$("input[type=checkbox].warnOnUncheck").change(function(event) { 
    var confirmed = true; 
    if(!this.checked) { 
     var message = $(this).data("warnMessage"); 

     var confirmed = confirm(message); 
     if(!confirmed) { 
      this.checked = true; 
     } 
    } 

    if (confirmed) { 
     var localFieldsetContent = $(this).closest("fieldset").find("div.fieldsetContent"); 
     localFieldsetContent.slideToggle(200); 
    } 
}); 

這裏是一個jsfiddle

---

如果您不能合併的處理程序，可以綁定「崩潰」功能到一些自定義事件，並在複選框上有「點擊」事件觸發它。

看到這個updated jsfiddle：

$("input[type=checkbox].warnOnUncheck").change(function(event) { 
    var confirmed = true; 
    if(!this.checked) { 
     var message = $(this).attr("data-warnMessage"); 
     confirmed = confirm(message); 
     if(!confirmed) { 
      this.checked = true; 
     } 
    } 

     if (confirmed) { 
      $(this).trigger("myToggleVisibility"); 
     } 
}); 

$("fieldset.collapseable").on("myToggleVisibility", function(event) { 
    $(this).find('.fieldsetContent').slideToggle(200); 
}); 

Answer 2

使用event.preventDefault();

OR

if(!confirmed){ 
    this.checked = true; 
    return false; 
} 

Answer 3

試試這個：

$("input[type=checkbox].warnOnUncheck").change(function(event) {  
    if (event.isImmediatePropagationStopped()) { 
     return false; 
    } 
    if(!this.checked) {  
     var message = $(this).data("warnMessage");  
     var confirmed = confirm(message); 
     if(!confirmed) {  
      this.checked = true; 
      event.stopImmediatePropagation(); 
     } 
    }  
}); 

讀http://api.jquery.com/event.isImmediatePropagationStopped/