文档章节

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

issac宝华
 issac宝华
发布于 2016/06/17 19:12
字数 268
阅读 388
收藏 3

问题代码:

 <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

没有更多内容

加载失败,请刷新页面

加载更多

打开eclipse出现an error has occurred see the log file

解决方法: 1,打开eclipse安装目录下的eclipse.ini文件; 2,打开的文本文件最后添加一行 --add-modules=ALL-SYSTEM 3,保存重新打开Eclipse。...

任梁荣
昨天
4
0
搞定Northwind示例数据库,无论哪个版本的SQLServer都受用

Northwind数据库 从这里可以找到突破口: http://social.msdn.microsoft.com/Forums/zh-CN/Vsexpressvb/thread/8490a1c6-9018-40c9-aafb-df9f79d29cde 下面是MSDN: http://msdn2.microsoft......

QQZZFT
昨天
1
0
mysql主从同步,安装配置操作

准备 两台mysql服务,我这里准备了如下: 主库:192.168.176.128 从库:192.168.176.131 如何在Linux上安装mysql服务,请看https://blog.csdn.net/qq_18860653/article/details/80250499 操作...

小致dad
昨天
4
0
一个手机装天下,走遍中国都不怕!

导读 “1200元(人民币,下同),微信支付,可以,你扫我。”来自西非马里共和国的展商Albert拿着手机,和一位买走他手鼓的中国游客用简单的汉语交流着。 近日,“第十四届中俄蒙经贸洽谈暨商品...

问题终结者
昨天
3
0
Redis的“死键”问题

大规模的数据库存储系统中,数据的生命周期管理是很有必要的;从业务角度发现过期数据,数据归档和数据碎片整理等。以MySQL为例,1个运行很久的TB级MySQL实例中,极有可能数百GB的数据,对业...

IT--小哥
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部