防止在原始JavaScript（而不是JQuery）中冒泡JavaScript

我試圖通過創建一個包含一些文本和複選框輸入的範圍來創建帶按鈕的複選框。防止在原始JavaScript（而不是JQuery）中冒泡JavaScript

我想要的交互方式是，只要點擊「按鈕」或複選框，複選框的狀態就會切換。

但是，我受到泡沫問題的困擾，我無法弄清楚如何解決這個問題，因爲這裏的所有解決方案似乎都是JQuery解決方案 - 我期待這樣做的是原始JS。

我至今是：

HTML：

<span id="myCBbutton" class="CBbutton" onClick="toggleIt(event);">Toggle Me <input type="checkbox" id="myCheckBox" onClick="toggleIt(event);event.stopPropagation();"></span>

CSS：

.CBbutton { 
    border: solid 1px black; 
    border-radius: 3px; 
    background-color: silver; 
    padding: 2px; 
    cursor: pointer; 
}

和JS：

function toggleIt(event) { 
    var checkBox = document.getElementById('myCheckBox'); 

    if (checkBox.checked) { 
     alert("before: it's checked!"); 
    } else { 
     alert("before: NOT checked"); 
    } 

    checkBox.checked = (checkBox.checked)?false:true; 

    if (checkBox.checked) { 
     alert("after: it's checked!"); 
    } else { 
     alert("after: NOT checked"); 
    } 
    event.stopPropagation(); 
    return false; 
}

我還創建了一個小提琴here。

我想從其他問題和答案，解決辦法是要麼event.preventDefault()或event.stopPropagation()有或沒有return false但我只是無法得到這個工作。

來源

2015-10-16 Fat Monk

在這裏發佈的代碼，不只是在小提琴 –

您的問題不是與傳播，它是複選框狀態改變在點擊事件觸發處理程序之前。因此，當您單擊複選框本身時，其狀態在事件到達處理程序時已經「檢查」，處理程序然後轉向並取消選中它。如果你點擊跨度，你的複選框還沒有被選中，並且處理程序會檢查它。 – gfullam

event.stopPropagation()是好的代碼，但你的問題是在其他地方。

當你這樣做：checkBox.checked = (checkBox.checked)?false:true;，瀏覽器觸發一個新的click事件，這個冒泡給父母。

但無論如何，Luizgrs解決方案是我認爲的更好。

來源

2015-10-16 14:33:38 Magus

分配給'.checked'不會觸發點擊事件。 – Barmar

對Firefox說：（ – Magus

@Magus Firefox說：[編程設置值不會觸發更改或單擊處理程序]（http://jsfiddle.net/7rs5b4p1/1/） –

達到你想要，你可以使用一個label而不是去爲Javascript什麼：

.CBbutton { 
 
    border: solid 1px black; 
 
    border-radius: 3px; 
 
    background-color: silver; 
 
    padding: 2px; 
 
    cursor: pointer; 
 
}

Label with checkbox inside:<br> 
 
<label id="myCBbutton" class="CBbutton">Toggle Me <input type="checkbox" id="myCheckBox"></label> 
 
<br><br> 
 
Label with checkbox outside<br> 
 
<label class="CBbutton" for="myCheckBox2">Toggle Me</label> 
 
<input type="checkbox" id="myCheckBox2">

但回答你的問題，stopPropagation是什麼使一個事件不會傳播到家長的處理程序。

來源

2015-10-16 14:30:57 Luizgrs

比OP試圖做的好得多 –

在這裏使用'label'作爲替代方案的榮譽。 – gfullam

不錯！我喜歡。我已經在我的代碼中使用了這個解決方案，因爲它很整潔（所以有一個upvote），但我會接受Magus的答案，因爲它直接用我寫的代碼來回答問題。 –

您可以使用event.stopImmediatePropagation()

Sample Here

Documentation Here

來源

2015-10-16 14:32:50 Amit

我的建議是，你use a label由Luizgrs建議