Question

我有一个围绕一个复选框的div。 Div有一个事件处理程序来检查复选框，复选框的默认行为是在点击时检查或取消选中，但是事件正在冒泡到div并且divs函数正在取消检查 - 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(); 
});

复选框冒泡到div - Javascript

1 个答案: