首页 > 其他分享 >232-父级div,包含子div,子div有点击事件,父div有点击事件,js如何实现,2个点击事件不干扰

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

时间:2023-12-11 13:32:58浏览次数:32  
标签:function 父级 点击 事件 div click

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的点击事件');
  });
});

标签:function,父级,点击,事件,div,click
From: https://blog.51cto.com/u_14816966/8771215

相关文章

  • php 去除图片以及DIV的width、height、style
    1.去掉图片的宽高,去掉DIV的style样式$str='<divstyle="margin:0pxauto;width:740px;"><p><imgwidth="748"height="444"alt=""src="/images/upload/Image/manmiao_0001.jpg"/></p></div......
  • FreeRTOS中的事件组:实现任务同步与通信的强大工具
    引言:在实时嵌入式系统中,任务同步和通信是至关重要的,而FreeRTOS提供的事件组(EventGroups)机制为实现这一目标提供了一种高效且灵活的解决方案。本篇博客将深入研究FreeRTOS中的事件组,详细介绍其原理、使用方法,以及在实际应用中的一些最佳实践。事件组原理:事件组是FreeRTOS中的一种......
  • 图片铺满div元素不变形,超出部分隐藏,保留中心部分css代码
    在我们网站更新文章的时候,经常会插入图片,丰富信息。但是我们插入的图片长宽比例并不一定是固定的。我们在调用缩略图的时候,常常会出现图片变形的情况,高和宽不成比例。那么如何让图片不变形,又能铺满div元素呢?我们可以使用css代码中object-fit属性来实现。object-fit属性指定元素的......
  • 无涯教程-MFC - 消息和事件
    应用程序由各种对象组成,大多数情况下,计算机上运行着多个应用程序,并且不断要求操作系统执行一些任务。Map消息由于Windows是面向消息的操作系统,因此Windows环境的大部分编程都涉及消息处理,每一个事件,例如一个键盘或鼠标点击发生时,一个消息被发送到该应用程序,然后必须处理该事件......
  • 231-js 动态创建a元素,点击a后,打开新页签,下载文件
    functiondownloadFile(){constlink=document.createElement('a');link.href='your_file_url';//替换为要下载的文件的URLlink.target='_blank';link.download='file_name';//替换为要保存的文件名document.body.appendChi......
  • flink事件时间的水印延迟不会导致延迟数据在上一个窗口内
    设窗口为5,延迟为3。假如数据为:012567348则两个窗口为:window=TimeWindow{start=0,end=5}01234window=TimeWindow{start=5,end=10}5678即:567的数据不会包含在TimeWindow{start=0,end=5}里。验证程序:publicclassFlinkWindowExample{pu......
  • Codeforces Round 914 (Div. 2)
    CodeforcesRound914(Div.2)A.Forked!#include<bits/stdc++.h>#defineendl'\n'#defineintlonglongusingnamespacestd;voidsolve(){inta,b;intx,y;cin>>a>>b>>x>>y;map<pair<int,in......
  • Codeforces Round 803 (Div. 2)
    基本情况A题秒了。B题经典+2。(经典不开longlong)C题读错题,没得思路。B.RisingSandProblem-B-Codeforces思路好想,分类讨论找规律就行。这里还是要强调一下认真分析数据:InputThesecondlineofeachtestcasecontains\(n\)integers\(a_1,a_2,\ldots,a_n\)......
  • VUE框架CLI组件化全局事件总线实现原理------VUE框架
    <template> <div> <!--内置函数的实现步骤--> <!--提供事件源,给事件源绑定事件,编写回调函数,将回调函数和事件进行绑定--> <!--等待事件的触发,事件触发执行回调函数--> <!--组件的自定义事件实现步骤--> <button@click="Hello()">你好</button> <!--给Us......
  • Codeforces Round 914 (Div. 2)
    基本情况脑子最卡的一集。A题读假题,卡了快一小时。B题代码太复杂,出错不好修改,一直调。虽然最后都出来了,但是没有剩下任何时间看后面题目了。A.Forked!Problem-A-Codeforces一开始不知道犯得什么病,觉得可以斜着走一格算作一步,然后情况就太多了,非常不好处理。后面突......