JS事件向下穿透，给父元素绑定事件，点击到子元素时返回的target信息为子元素（想要父元素的信息）

最新推荐文章于 2025-04-11 08:58:54 发布

原创最新推荐文章于 2025-04-11 08:58:54 发布 · 9.2k 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#JS #事件委托 #事件向下穿透

本文介绍了一种解决JS事件穿透问题的方法，通过使用currentTarget属性，可以准确地获取到绑定事件的元素信息，而非触发事件的元素。这在处理复杂的DOM结构时尤其有用。

这个问题答案很简单，但困扰了我两年，先上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS事件穿透</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
    <div id="outDiv" data-info="out" style="border: 1px solid black;padding: 10px;">
        Out
        <div id="innerDIv"  data-info="inner" style="border: 1px solid red;padding: 5px;">
            Inner
        </div>
    </div>
</body>
<script>
    $("#outDiv").click(function (e) {
        console.log(e.target.dataset.info)
    })
</script>
</html>

效果图：

在这段代码中，我想要实现的效果是点击Out名字的div,获取到data-info为out的信息，点击Out里面的子元素的时候，也返回我绑定事件的Out的Div的data-info的信息，但现在问题出在，当我点击Inner的div的时候，返回的是Inner这个div上的datainfo的信息，效果如图：