文档章节

解决:点击子元素(子元素自己也绑定了事件)不触发父元素绑定的事件

issac宝华
 issac宝华
发布于 2016/06/17 19:12
字数 268
阅读 385
收藏 3
点赞 0
评论 1

问题代码:

 <div class="elementI" style="height: 100px;width: 100px;border: 1px solid red;">

    父元素

    <div class="elementII" style="height: 50px;width: 50px;border: 1px solid black;">子元素</div>

</div>

<script type="text/javaScript">

    /*子元素绑定的事件*/

    $(".elementI").click(function(){

        alert("elementI");

    });

    /*父元素绑定的事件*/

    $(".elementII").click(function(){

        alert("elementII");
    });


</script> 

如上代码:点击子元素区域,会输出"elementI"和 "elementII" ,点击非子元素的父元素区域:输出“ elementII”

需要实现的效果是:

1)点击子元素区域:只会输出 “ elementI ”;

2)点击非子元素的父元素区域输出:“elementII”

实现的方法:

在子元素绑定的事件中阻止父元素事件的冒泡。这个方法是需要使用jQuery的事件,使用“事件”首先是要在参数列表中添加“形参”,比如:

要使用的方法是:

代码:

以下代码代替子元素的事件:

/*子元素绑定的事件*/

$(".elementI").click(function(event){
 
   alert("elementI");
   event.stopPropagation()

});

 

© 著作权归作者所有

共有 人打赏支持
issac宝华
粉丝 9
博文 140
码字总数 34397
作品 0
珠海
加载中

评论(1)

喜欢蚯蚓的猫
喜欢蚯蚓的猫
例子中的父子搞错了吧!
javascript和jq的事件委托

今天在公司,有个需求是,通过ajax动态查询数据,回来,再添加到一个ul的li元素中,例如(点击生成 li 模拟,加载数据生成相应的数据, 事件: 点击): <!DOCTYPE html><html><head> <meta c...

xbuding
2016/04/27
145
0
怎么做到点击子元素(子元素自己也绑定了事件)不触发父元素绑定的事件?

例如一下的代码: html: 父元素 子元素

issac宝华
2016/06/16
5.7K
7
事件大全

大家好,在学习H5的过程中,我们接触了许许多多不同的事件,它们各自都有自己独到的用途,且在自己的领域发挥了重要的作用,下面就跟随我一起看看它们都做了些啥,Let's go!!! 鼠标事件、键盘...

大仁孙
2016/07/13
28
0
【笔记】事件委托(即事件代理)知识点

事件委托原理 事件委托就是利用事件冒泡原理实现的! 事件冒泡:就是事件从最深节点开始,然后逐步向上传播事件; 例:页面上有一个节点树,div > ul > li > a 比如给最里面的a 加一个click...

sgosky
2017/06/23
0
0
jquery之on()和click()的区别讲解

之前写代码时发现动态添加的事件点击无效果,结果发现是on()和click()语法上的理解失误,在这里总结一下 举例说明: 表结构 添加 1.点击添加按钮向ul里面动态添加删除按钮 $(".btn").on('clic...

cyyy1223的博客
2017/12/14
0
0
理解:javascript事件捕获 与 事件冒泡

术语定义: 1.描述的是从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序。 2.就是用户或浏览器自身执行的某种动作。诸如click(点击)、load(加载)、mouseover(鼠标悬停)。 3.响应某个...

mamadu
2017/10/11
0
0
dragenter和dragleave事件

最近遇到一个需求,就是在用户把文件拖住到我们的编辑器时,编辑器样式上需要做出反应,让用户知道拖拽已经进入有效范围,可以松手了。一看,so easy,不就是监听一个dragenter和dragleave事...

牧羊童鞋
2017/10/19
0
0
JavaScript事件代理

先来看看addEventListener() 方法 addEventListener() 方法用于向指定元素添加事件句柄。 addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。 你可以向一个元素添加多个事件句...

独孤蝈蝈
2016/10/23
17
0
Vue 组件(深刻理解)

组件的基本使用 注册组件 注册组件就是利用方法,先传入一个自定义组件的名字,然后传入这个组件的配置。 如上方式,就已经创建了一个自定义组件,然后就可以在Vue实例挂在的DOM元素中使用它...

Flyes
2017/12/07
0
0
JS三教九流系列-Mootools.js-另一款非常优秀的js类库(一)

相比于jq,mootools很多人是没有听说过得,他的api和对dom的操作没有jq的好,不容易上手。 设计也不如jq复杂,jq我们在使用时很容易上手,不得不承认,在容易上手的背后有着很复杂的原理,大...

透笔度
2015/08/24
0
4

没有更多内容

加载失败,请刷新页面

加载更多

下一页

用axios.all处理并发请求

如果我们需用在两个接口同时完成后在执行一些逻辑,我们可以使用axios.all处理并发请求: function getUserAccount() { return axios.get('/user/12345');}function getUserPermissio...

JamesView
35分钟前
0
0
SpringCloud 微服务 (十六) 服务追踪 Zipkin

问题 在服务中,有一个接口,该A接口中又调用了其他服务的B、C、D接口,出现一个请求耗时大的问题,这时候并不知道该B、C、D接口中哪个接口造成的耗时量,然后比如确定C服务接口出现的耗时量大,但...

___大侠
45分钟前
0
0
Java面试基础篇——第八篇:抽象类与接口的区别

1.抽象类 抽象类:如果一个类中包含有抽象方法,或这个类使用abstract关键字修饰,则称这个类是抽象类。 抽象方法是什么呢?抽象方法就是指用abstract关键字修饰的方法。 需要注意的是:抽象...

developlee的潇洒人生
今天
2
0
jsoup 相关资料

1.jsoup 2.Jsoup概述 3.jsoup入门 4.jsoup Java HTML Parser 1.11.3 API

IT追寻者
今天
0
0
JPA @MappedSuperclass 注解说明

基于代码复用和模型分离的思想,在项目开发中使用JPA的@MappedSuperclass注解将实体类的多个属性分别封装到不同的非实体类中。 1.@MappedSuperclass注解只能标准在类上:@Target({java.lang....

海博1600
今天
0
0
【一】Scala Configuration 相关API

Play使用了 Typesafe config library,但是也提供了一个有着更多Scala高级特性的的 Configuration 封装。不熟悉Typesafe配置的开发者可以移步 configuration文件的语法和特性文档。 读取配置...

Landas
今天
3
0
使用cookie技术 记住账号

1. 效果 2. 实现过程 2.1 前端 将用户的选中传递给后台 这个参数的获取是 参考:https://my.oschina.net/springMVCAndspring/blog/1860498 // var rememberLogin = $("#rememberLoginId").i...

Lucky_Me
今天
1
0
《趣谈网络协议》02之网络分层的真实含义

一、提出问题 1.提出问题 当你听到什么二层设备、三层设备、四层 LB 和七层 LB 中层的时候,是否有点一头雾水,不知道这些所谓的层,对应的各种协议具体要做什么“工作”? 2.这四个问题你弄...

aibinxiao
今天
2
0
Python3学习日志二 Python中的集合set和字典dict

1.集合set 定义一个集合set 我们可以看到定义集合set有两种不同的形式,如果要定义一个空的集合set不能用{}而是要用set();另外,集合是无序的,而且set中的元素是不可重复的,如果你定义了一...

Mr_bullshit
今天
0
0
adb 操作指令详解

ADB,即 Android Debug Bridge,它是 Android 开发/测试人员不可替代的强大工具,也是 Android 设备玩家的好玩具。 注:有部分命令的支持情况可能与 Android 系统版本及定制 ROM 的实现有关。...

孟飞阳
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部