在web开发中，为父容器添加点击事件监听器时，常遇到点击其子元素却发现事件目标是子元素而非父容器的问题。本文旨在提供两种有效策略，确保父容器仅响应直接作用于其自身的点击事件，而忽略来自其后代元素的事件。我们将深入探讨javascript中`e.target`与`e.currenttarget`的差异及应用，并介绍css `pointer-events: none;`属性的巧妙用法，帮助开发者精确控制dom事件流。
理解JavaScript事件流中的 target 与 currentTarget
当我们在一个父元素上注册事件监听器时，例如一个div容器，并期望它能捕获所有在其内部发生的点击事件。然而，当用户点击容器内部的子元素时，事件对象（e）的target属性通常会指向实际被点击的子元素，而不是父容器本身。这是因为e.target代表了事件最初发生的DOM元素，而e.currentTarget则代表了当前正在处理事件的DOM元素，即事件监听器所绑定的元素。
考虑以下HTML结构和JavaScript代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
<div id="container" style="padding: 10px; border: 1px solid black;">
<div id="child1" style="margin: 10px; background-color: chartreuse;">
child1 content
</div>
<div id="child2" style="margin: 10px; background-color: aqua;">
child2 content
</div>
</div>
<script>
document.getElementById("container").addEventListener('click', (e) => {
console.log('e.target:', e.target);
console.log('e.currentTarget:', e.currentTarget);
}, false); // 即使将第三个参数设为 true (捕获阶段)，行为也不会改变
</script>
</body>
</html>当点击child1或child2时，控制台会输出e.target为被点击的子元素，而e.currentTarget始终为#container。如果我们的目标是让#container只响应直接点击到其自身空白区域的事件，上述代码将无法满足要求。
解决方案一：利用 e.target 与 e.currentTarget 进行事件过滤
最常见的解决方案是利用e.target和e.currentTarget之间的差异来过滤事件。在事件处理函数内部，我们可以检查这两个属性是否相同。如果它们不相同，则表示点击事件是从子元素冒泡上来的，此时我们可以选择忽略该事件，或者执行特定的逻辑。
立即学习“Java免费学习笔记（深入）”；
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
<div id="container" style="padding: 10px; border: 1px solid black;">
<div id="child1" style="margin: 10px; background-color: chartreuse;">
child1 content
</div>
<div id="child2" style="margin: 10px; background-color: aqua;">
child2 content
</div>
</div>
<script>
document.getElementById("container").addEventListener('click', (e) => {
// 只有当事件的原始目标与当前处理事件的元素相同时，才执行逻辑
if (e.target !== e.currentTarget) {
console.log('点击了子元素，容器不响应直接事件。');
return; // 阻止容器响应来自子元素的点击
}
console.log('点击了容器自身区域，执行容器的点击逻辑。');
// 这里可以放置容器自身的点击处理逻辑
}, false);
</script>
</body>
</html>在这个优化后的代码中，当点击child1或child2时，e.target将是子元素，而e.currentTarget是#container。由于e.target !== e.currentTarget为真，事件处理函数会提前返回，从而阻止容器响应来自子元素的点击。只有当点击发生在#container自身的空白区域时，e.target才会与e.currentTarget相等，此时容器的点击逻辑才会被执行。
解决方案二：使用CSS pointer-events: none; 阻止子元素接收事件
另一种方法是利用CSS属性pointer-events: none;。这个属性可以应用于任何元素，使其不再成为鼠标事件（如点击、悬停、拖拽等）的目标。这意味着，当鼠标事件发生在具有pointer-events: none;属性的元素上时，事件将“穿透”该元素，作用于其下方的元素。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style>
#container {
padding: 10px;
border: 1px solid black;
}
/* 对子元素应用 pointer-events: none; */
#child1, #child2 {
margin: 10px;
background-color: chartreuse; /* child1 */
background-color: aqua; /* child2 */
pointer-events: none; /* 阻止子元素接收鼠标事件 */
}
</style>
</head>
<body>
<div id="container">
<div id="child1">
child1 content
</div>
<div id="child2">
child2 content
</div>
</div>
<script>
document.getElementById("container").addEventListener('click', (e) => {
console.log('点击了容器或其子元素（通过穿透），e.target:', e.target);
// 此时 e.target 将始终是 #container，因为子元素不接收事件
if (e.target === e.currentTarget) {
console.log('容器成功捕获点击事件。');
}
}, false);
</script>
</body>
</html>在此示例中，即使点击了child1或child2的区域，由于它们设置了pointer-events: none;，实际接收点击事件的将是它们下方的#container。因此，e.target将始终是#container。
注意事项与选择建议
- e.stopPropagation() 的局限性： e.stopPropagation() 可以阻止事件继续向上冒泡到父元素，但它不能改变e.target的值。如果父元素已经绑定了监听器，并且点击发生在子元素上，父元素的监听器依然会触发，只是事件不会继续向DOM树更上层传播。因此，stopPropagation无法解决父容器只响应自身点击的问题。
-
JavaScript过滤方法的优势：
- 灵活性高： 子元素仍然可以拥有自己的事件监听器并响应点击，而不会影响父容器的特定逻辑。
- 语义清晰： 通过代码逻辑明确表达了“只有当点击直接作用于此元素时才响应”的意图。
-
CSS pointer-events: none;的优势与局限：
- 实现简洁： 对于仅作为视觉呈现，不需交互的子元素，使用CSS方法非常直接和高效。
- 潜在副作用： 应用pointer-events: none;后，子元素将完全失去所有鼠标事件的交互能力，包括hover、click等。如果子元素需要有自己的交互行为，此方法不适用。
- 可访问性： 对于依赖鼠标交互的用户，pointer-events: none;可能导致元素无法被聚焦或激活，影响可访问性。
总结
精确控制DOM事件的捕获和响应是前端开发中的一项基本技能。通过深入理解e.target和e.currentTarget在事件流中的角色，我们可以利用JavaScript的条件判断来过滤不符合预期的事件。同时，CSS的pointer-events: none;属性提供了一种声明式的方式来改变元素的事件接收行为。在实际项目中，开发者应根据具体需求和子元素的交互特性，明智地选择最合适的解决方案，以构建健壮且用户体验良好的Web应用。
