如何实现父级div点击不干扰子div点击事件？
- 内容介绍
- 文章标签
- 相关推荐
本文共计122个文字，预计阅读时间需要1分钟。
HTML 结构：
JavaScript/jQuery 代码：javascript$(document).ready(function() { // 父级 div 的点击事件处理程序 $('#parent').click(function() { // 执行相关操作 });});
HTML 结构
<div id="parent">
<div id="child"></div>
</div>
JavaScript/jQuery 代码：
$(document).ready(function() {
// 父级div的点击事件处理程序
$('#parent').on('click', function() {
console.log('父级div的点击事件');
});
// 子级div的点击事件处理程序
$('#child').on('click', function(event) {
event.stopPropagation(); // 阻止事件冒泡，避免触发父级div的点击事件
console.log('子级div的点击事件');
});
});
本文共计122个文字，预计阅读时间需要1分钟。
HTML 结构：
JavaScript/jQuery 代码：javascript$(document).ready(function() { // 父级 div 的点击事件处理程序 $('#parent').click(function() { // 执行相关操作 });});
HTML 结构
<div id="parent">
<div id="child"></div>
</div>
JavaScript/jQuery 代码：
$(document).ready(function() {
// 父级div的点击事件处理程序
$('#parent').on('click', function() {
console.log('父级div的点击事件');
});
// 子级div的点击事件处理程序
$('#child').on('click', function(event) {
event.stopPropagation(); // 阻止事件冒泡，避免触发父级div的点击事件
console.log('子级div的点击事件');
});
});