在前端开发中，我们通常需要在页面上给某些元素绑定事件。其中，focus 事件是一个很常见的事件，它会在用户聚焦到某个元素（如 input、textarea 等）时触发。然而，在使用一个带有子元素的元素（如 div）时，我们可能不想让点击子元素也触发该元素的 focus 事件。那么该怎么办呢？
解决方法
一种简单粗暴的方式是用 JavaScript 来处理。我们可以通过判断 click 事件的 target 是否为该元素本身来决定是否触发 focus 事件。具体实现可以参考下面的代码：
---- ----------- --------------
------ ------------
-------- -------
------
--------
----- ------ - ----------------------------------
----- ----- - ------------------------------
-------------------------------- ------- -- -
-- ------------- --- ------- -
--------------
-
---
---------这里利用了 tabindex 属性，将 div 变成了可聚焦的元素，从而能够触发 focus 事件。当点击子元素时，由于 event.target 指向的是被点击的元素，因此不会触发 focus 事件；当点击 div 自身时，由于 event.target 指向的是 div 元素本身，因此会触发 focus 事件。
虽然这种方式可以很好地解决问题，但是它需要使用 JavaScript，并且实现起来稍微有些繁琐。那么有没有更简单的方法呢？答案是肯定的。我们可以使用 CSS 解决这个问题。
---- --------------- ------ ------------ -------- ------- ------ ------- ------- - --------- --------- - -------------------------------- - -------- ----- - ------- - - - --------------- ----- - ------- - ------------ - --------------- ----- - --------
这里利用了 CSS 的一些特性来达到目的：
- 使用 position: relative; 将 div 变成一个包含块，从而能够触发 focus-within 伪类。
- 使用 .parent:focus-within:not(:focus) 来判断当前是否聚焦到了 div 元素本身。
- 当 div 元素被聚焦时，将其 outline 样式设为 none，从而消除默认的聚焦样式。
- 使用 pointer-events:none; 将子元素的指针事件（如 click、hover 等）禁止掉。
- 对于 input 元素，使用 pointer-events:auto; 来允许其响应鼠标点击事件。
学习和指导意义
本文介绍了两种阻止点击 div 时触发 focus 事件的方法：JavaScript 和 CSS。虽然前者实现起来有些繁琐，但是它可以兼容老版本的浏览器；后者则更为简洁，但需要浏览器支持较新的 CSS 特性。读者可以根据自己的需求选择适合自己的方式使用。
此外，本文还介绍了一些与该问题相关的知识点，包括 tabindex 属性、event.target 属性、:focus-within 伪类等。这些知识点对于深入理解前端开发中的事件机制和样式布局都有很大帮助。
最后，阻止点击 div 时触发 focus 事件只是前端开发中的一个小问题，但却涉及到了很多有趣的技术点。希望读者能够通过本文的学习，不断提升自己
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27669