父元素点击事件被禁用的子元素也能触发？利用事件冒泡轻松实现！

2024-03-10 00:56:32

如何利用事件冒泡实现父元素点击事件

在设计用户界面的过程中，我们经常会遇到交互元素嵌套的情况。有时，子元素的状态会影响父元素的行为，导致父元素的交互能力下降。一个常见的例子是，当子元素（如文本输入）被禁用时，父元素（如 div）的点击事件也会失效。

本教程将介绍如何解决这个问题，让你即使点击禁用的文本输入，也能触发父元素的点击事件，从而选中一个复选框。

问题背景

考虑以下 HTML 结构：

<div id="inputGroup">
  <input type="text" id="textInput" disabled>
  <input type="checkbox" id="checkBox">
</div>

在这个设置中，当复选框未选中时，文本输入被禁用。这意味着你无法点击文本输入部分的 inputGroup。我们的目标是解决这个问题，以便单击禁用的文本输入也能触发点击事件。

解决方案

解决此问题的关键是理解事件冒泡。事件冒泡是一种事件处理机制，其中事件从目标元素传播到其父元素，直到到达文档根元素。在我们的情况下，当我们单击文本输入时，事件会先触发文本输入的点击事件处理程序，然后触发 inputGroup 的点击事件处理程序。

为了解决此问题，我们可以利用事件冒泡。通过在 inputGroup 上注册一个点击事件侦听器，我们可以捕获文本输入触发的点击事件，即使文本输入已禁用。

修改后的代码如下：

const inputGroup = document.getElementById("inputGroup");
inputGroup.addEventListener("click", function (e) {
  const checkBox = document.getElementById("checkBox");
  if (checkBox.checked) {
    checkBox.checked = false;
    textInput.setAttribute("disabled", "");
  } else {
    checkBox.checked = true;
    textInput.removeAttribute("disabled");
  }
});