嵌套div点击内层同时触发内外两层click事件该如何解决？

问题本质 #

你遇到的是DOM标准事件流的冒泡机制导致的问题：点击嵌套的内层元素时，点击事件会默认向上层父元素逐层传播，因此会先后触发内层、外层的点击回调函数。

解决方案 #

方案1：阻止内层事件冒泡（推荐） #

直接在内层的点击事件中调用event.stopPropagation()中断事件向上传播，即可避免触发外层的点击回调。修改后完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body style="height:100px; width:100px;">
<div style="width: 100%; height: 100%; background-color: black;" onclick="console.log('outer')">
    <div style="width: 50%; height: 50%; background-color: brown;" onclick="event.stopPropagation();console.log('inner');"></div>
</div>
</body>
</html>

方案2：外层事件判断触发源 #

如果不能修改内层的事件逻辑，可以在外层的点击回调中添加判断，只有当点击的目标元素是外层div本身时才执行逻辑：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body style="height:100px; width:100px;">
<div style="width: 100%; height: 100%; background-color: black;" onclick="if(event.target === this) console.log('outer')">
    <div style="width: 50%; height: 50%; background-color: brown;" onclick="console.log('inner');"></div>
</div>
</body>
</html>

两种方案都可以实现需求：点击棕色区域仅打印inner，点击黑色区域仅打印outer。

内容的提问来源于stack exchange，提问作者RoyalBosS