文档章节

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

issac宝华
 issac宝华
发布于 2016/06/17 19:12
字数 268
阅读 400
收藏 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: 父元素 子元素 我想要达到的目的是,点击子元素区域只会触发子元素的事件,输出“elementI”,点击除“子元素”外的“父元素”区域输出“elementII”. 请各路大神赐教...

issac宝华
2016/06/16
5.8K
7
【Vue.js 牛刀小试】03:第三章 - 事件修饰符的使用

前言 熟悉了 Vue 的指令系统后,在实际开发中,不可避免的会使用到对于事件的操作,如何处理 DOM 事件流,成为我们必须要掌握的技能。不同于传统的前端开发,在 Vue 中给我们提供了事件修饰符...

墨墨墨墨小宇
2018/11/02
0
0
事件大全

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

大仁孙
2016/07/13
28
0
jquery之on()和click()的区别讲解

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

cyyy1223的博客
2017/12/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

开始看《JSP&Servlet学习笔记》

1:WEB应用简介。其中1.2.1对Web容器的工作流程写得不错 2:编写Servlet。搞清楚了Java的Web目录结构,以及Web.xml的一些配置作用。特别是讲了@WebServlet标签 3:请求与响应。更细致的讲了从...

max佩恩
36分钟前
1
0
mysql分区功能详细介绍,以及实例

一,什么是数据库分区 前段时间写过一篇关于mysql分表的的文章,下面来说一下什么是数据库分区,以mysql为例。mysql数据库中的数据是以文件的形势存在磁盘上的,默认放在/mysql/data下面(可...

吴伟祥
37分钟前
2
0
SQL语句查询

1.1 排序 通过order by语句,可以将查询出的结果进行排序。放置在select语句的最后。 格式: SELECT * FROM 表名 ORDER BY 排序字段ASC|DESC; ASC 升序 (默认) DESC 降序 1.查询所有商品信息,...

stars永恒
53分钟前
2
0
IntelliJ IDEA 第一个 Scala 程序

IntelliJ 安装完成 Scala 插件后,你需要尝试使用 IntelliJ 来创建并且运行第一个程序。 通常这个程序只是简单的输出 Hello World。 创建一个新工程 在文件下面选择新建,然后选择创建工程。...

honeymose
58分钟前
2
0
csapp 习题 - 如何实现异或 exclusive-or

阅读 csapp v3 时,练习题 2.13 很有意思。练习题描述如下。 位设置是对于参数 mask 中每一个为 1 的位,那么参数 x 中相应位则被设置为 1 ;位清除是对于参数 mask 中每一个为 1 的位,那么...

ylme
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部