子元素点击事件触发父元素点击事件

2023-11-30

假设你有一些这样的代码:

<html>
  <head>
  </head>
  <body>
     <div id="parentDiv" onclick="alert('parentDiv');">
         <div id="childDiv" onclick="alert('childDiv');">
         </div>   
      </div>
  </body>
</html>

我不想触发parentDiv当我点击时点击事件childDiv, 我怎样才能做到这一点?

Updated

另外,这两个事件的执行顺序是怎样的?


你需要使用event.stopPropagation()

现场演示

$('#childDiv').click(function(event){
    event.stopPropagation();
    alert(event.target.id);
});​

event.stopPropagation()

描述:防止事件在 DOM 树中冒泡, 防止任何父处理程序收到该事件的通知。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

子元素点击事件触发父元素点击事件 的相关文章

随机推荐

  • CSS 改变输入是否有值的样式

    我有一个带有占位符的输入元素 它应该始终出现 wrapper position relative input font size 14px height 40px placeholder position absolute font siz
  • Tkinter filedialog 破坏条目小部件

    tl dr 当应用程序调用时tkinter filedialog entry字段无法正确聚焦 长解释 初始化 tkinter 应用程序时 entry默认情况下启用字段 他们的状态是tk ENABLED 可以通过滚动字段来关注它们tab 最重
  • jcreator中如何设置jdk路径

    我已经安装了jdk 1 7 in C jdk1 7 0 directory and JCreator in C Program Files directory 我在JCreator中设置了正确的jdk路径 但是当我尝试在其中执行 java
  • 创建临时表前先检查临时表是否存在,如果存在则删除

    我使用以下代码来检查临时表是否存在 并在再次创建之前删除该表 如果存在 只要我不更改列 它就可以正常工作 如果我稍后添加一列 它将给出 无效列 的错误 请让我知道我做错了什么 IF OBJECT ID tempdb Results IS N
  • Delphi TCP连接透明代理

    有人知道用 Delphi 编写的 TCP 套接字代理应用程序的示例吗 我正在构建一个小型代理应用程序 它需要侦听给定 TCP 端口上的套接字连接 读取通过连接发送的 XML 数据包 通过 TCP 将请求发送到从可用后端服务器池中选择的服务器
  • Webstorm中的Jade语言注入

    我有一个 HTML 元素 我希望将其内容视为 Jade 稍后将其编译为纯 html Webstorm 显然无法识别这一点 因此它没有语法突出显示 如果我将 jade 添加为语言注入 它不会被列为可能的语言注入之一 然而 Jade 文件可以被
  • 使用 rownum 选择表的第二行

    我尝试过以下查询 select empno from select empno from emp order by sal desc where rownum 2 这不会返回任何记录 当我尝试这个查询时 select rownum empn
  • 无法读取未定义的属性“标题”,但显示标题

    我是 Angular 4 的新手 我正在尝试构建我的第一个应用程序 标题显示在屏幕上 但在console 这是 html 文件中的第 26 行 h1 result title h1 This is 旅行详情组件 export class T
  • 合并 Android 单元测试和连接测试代码覆盖率数据已损坏

    Android Gradle 插件 2 3 3 版本能够提供合并的单元测试和连接的测试代码覆盖率数据 在版本 3 0 0 中 此功能被破坏 因为每种测试类型都使用不同且不兼容的 JaCoCo 版本 拉斐尔 托莱多提供中等博客文章展示了如何在
  • 提交表单而不重新加载页面[重复]

    这个问题在这里已经有答案了 我有一个用 JavaScript 构建的函数 我想在表单提交被点击后执行该函数 它基本上完全改变了页面的外观 但我需要搜索框中的一个变量才能继续传递到 JavaScript 目前它会闪烁并重置那里的内容 因为它会
  • 使用 jodatime 查找剩余日期和时间

    我想使用 joda 时间进行比较 查找剩余天数和两天之间的时间 我正在使用两个像这样的 DateTime 对象 一个正在开始 另一个正在结束 DateTime endDate new DateTime 2011 12 25 0 0 0 0
  • React Redux mapDispatchToProps 与 this.props.dispatch

    到目前为止 我以这种方式使用容器和组件操作
  • Angular 2 - Typescript 函数与外部 js 库的通信

    Using JavaScript Infovis 工具包作为绘制图形和树的外部库 我需要操作节点的 onClick 方法 以便异步发送 HTTP GET 请求到服务器 并将来自服务器的数据分配给 Angular 服务类的属性和变量 通过使用
  • 将未链接的 Excel 图表粘贴到 Powerpoint

    我目前正在进行一个项目 将 50 多组 Excel 图表传输到 Powerpoint 演示文稿 我正在比较 50 多个项目并制作 50 多个相同的图表 我在 Excel 工作簿中设置的方式是 图表始终是相同的图表 即图表 2 但通过更改唯一
  • 如何获得UCWA和Skype Web SDK的授权?

    我有 Skype for Business 帐户通话 电子邮件受保护 我正在尝试获得授权 我对 lyncdiscover 服务的第一个请求 GET https lyncdiscover shockw4ves onmicrosoft com
  • Sinch SDK - 如何注销用户?

    我正在使用 Sinch SDK 进行即时消息传递 如何注销用户 我有注销用户的按钮 但无法在 Sinch SDK 中实现该功能 他们的文档或示例都没有描述此类功能 sinch客户端没有注销功能 我们认为移动用户是 在线 的 如果您不想接收更
  • 使用 __future__ 还是 future 来编写兼容 python2 和 python3 的代码更好?

    或者在某些特定情况下 其中一种比另一种更好 到目前为止 我所收集到的只是 future 仅适用于 gt 2 6 或 gt 3 3 我当前的代码非常基本 除了使用打印函数调用之外 在 python2 和 3 上运行相同 然而 随着时间的推移
  • Swift 中的宏?

    Swift 目前是否支持宏 或者未来是否计划添加支持 目前我正在分散 Log trace nil function FUNCTION file FILE line LINE 在我的代码的各个地方 在这种情况下 您应该为 宏 参数添加默认值
  • mvtnorm::pmvnorm 的 Rcpp 实现比原始 R 函数慢

    我正在尝试让 pmvnorm 的 Rcpp 版本至少与 R 中的 mvtnorm pmvnorm 一样快 我已经发现https github com zhanxw libMvtnorm并创建了一个带有相关源文件的Rcpp框架包 我添加了以下
  • 子元素点击事件触发父元素点击事件

    假设你有一些这样的代码 div div div div 我不想触发parentDiv当我点击时点击事件childDiv 我怎样才能做到这一点 Updated 另外 这两个事件的执行顺序是怎样的 你需要使用event stopPropagat