javascript - 复选框冒泡到 div - Javascript

Question

我有一个围绕复选框的 div。 Div 有一个检查复选框的事件处理程序，复选框的默认行为是在单击时检查或取消检查自身，但是事件会向下冒泡到 div，并且 div 函数会取消检查 - box 函数，如何防止单击复选框时触发 div 的函数？

    <div id="CloseForMeEmailCBDIV" style="width:50px;margin-left:6px; margin-top:8px; height: 24px;">
<input id="CloseForMeEmailCB" onclick="" type="checkbox" style="margin-left:6px;margin-top:4.49px;  transform: scale(2);">  Email</input>
</div> 

这是我尝试过的:

  document.getElementById('CloseForMeEmailCBDIV').addEventListener('click', function (evt) { 
document.getElementById('CloseForMeEmailCB').checked = 
!document.getElementById('CloseForMeEmailCB').checked; evt.preventDefault(); });

Answer 1

使用 evt.stopPropagation() 而不是 evt.preventDefault()。

preventDefault，顾名思义，只是阻止默认行为，例如切换复选框是单击复选框的默认操作，该操作将被阻止(取消)。

see example here

话虽这么说，a) 事件向上传播(从“最低”的可到达元素向上)，而 b) 一般来说，您不想停止传播事件的发生，因为它阻止了“事件的自然行为方式”，并且可能会给您带来进一步的问题。 c) 缓存您选择的元素。无需连续使用 getElementById 两次。将值保存在 var 中一次并使用它。

document.getElementById('CloseForMeEmailCBDIV').addEventListener('click', function (evt) { 
 var element = document.getElementById('CloseForMeEmailCB');
 element.checked = !element.checked; 
 evt.preventDefault(); 
});