当前位置: 首页 > 图灵资讯 > 技术篇> 232-父级div,包含子div,子div有点击事件,父div有点击事件,js如何实现,2个点击事件不干扰

232-父级div,包含子div,子div有点击事件,父div有点击事件,js如何实现,2个点击事件不干扰

来源:图灵教育
时间:2023-12-11 16:42:45

HTML 结构

<p id="parent">  <p id="child"></p></p>

JavaScript/jQuery 代码:

$(document).ready(function() {  // 父级p点击事件处理程序  $('#parent').on('click', function() {    console.log(父级p的点击事件);  });  // 子级p点击事件处理程序  $('#child').on('click', function(event) {    event.stopPropagation(); // 防止事件冒泡,避免触发父级p的点击事件    console.log(子级p的点击事件);  });});