在前端开发中，我们经常需要对用户输入进行处理。当用户与页面元素交互时，浏览器会触发一系列事件，这些事件有时候会在多个元素之间传递，这就是所谓的事件冒泡。默认情况下，事件会一直冒泡到文档根元素，除非其中一个处理程序调用了 event.stopPropagation() 方法来阻止事件冒泡。
本文将介绍如何在复选框中停止事件冒泡，以及如何使用它来解决实际问题。
复选框和事件冒泡
在 HTML 中，复选框是一种表单元素，它让用户可以选择一个或多个选项。每当用户在复选框上点击时，浏览器会触发 click 事件。如果该事件没有被处理程序截获，则会向上冒泡到文档根元素。
以下是一个简单的 HTML 页面，其中包含两个嵌套的复选框：
-- -------------------- ---- -------
--------- -----
------
------
---------------------
-------
------
-----
------ --------------- -----------
------ -------------------------
-----
------ --------------- -----------
------ -------------------------
------
------
--------
----- ----- - --------------------------------
----- ----- - --------------------------------
------------------------------- --------------- -
----------------------
--
------------------------------- --------------- -
----------------------
--
---------
-------
-------在这个例子中，当用户单击内部复选框时，事件将首先传递给它的处理程序，然后再冒泡到外部复选框。因此，如果不阻止事件冒泡，我们将看到两行控制台输出。
使用 stopPropagation() 阻止事件冒泡
要防止事件冒泡，可以使用 event.stopPropagation() 方法。调用此方法将停止事件从继续向上冒泡，因此任何父级元素的事件处理程序都不会被触发。
以下是如何在内部复选框的单击事件处理程序中使用 stopPropagation()：
const inner = document.getElementById('inner')
inner.addEventListener('click', function(event) {
console.log('点击内部复选框')
event.stopPropagation()
})在这个示例中，单击内部复选框将只会产生一行“点击内部复选框”的控制台输出，而不会冒泡到外部复选框。
实际应用案例：对复选框进行分组
现在，我们已经知道如何阻止复选框事件冒泡，那么我们可以用这个技巧来解决实际问题。例如，想象一下一个包含多个嵌套复选框的表单，我们需要将它们分组并让用户选择其中一组。
以下是如何使用 stopPropagation() 来实现此目的的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
---------------------
-------
------
-----
----- ------
------ --------------- ------------- --------------------
------ ----------------------- ---------
------ --------------- ------------- --------------------
------ ----------------------- ---------
------
-----
---
- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------