文档章节

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

issac宝华
 issac宝华
发布于 2016/06/17 19:12
字数 268
阅读 394
收藏 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
【Vue.js 牛刀小试】03:第三章 - 事件修饰符的使用

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

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

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

大仁孙
2016/07/13
28
0
怎么做到点击子元素(子元素自己也绑定了事件)不触发父元素绑定的事件?

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

issac宝华
2016/06/16
5.7K
7
【笔记】事件委托(即事件代理)知识点

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

sgosky
2017/06/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

kubernetes notes

Error from server (ServerTimeout): error when creating "mysql.yaml": No API token found for service account "default", retry after the token is automatically created and added t......

kut
25分钟前
1
0
代理模式---静态代理

package com.atguigu.java; //接口的应用:代理模式---静态代理。 public class ProxyTest { public static void main(String[] args) { NetWork work = new RealServer(); ProxyServer pro......

architect刘源源
40分钟前
2
1
工作中的一些Git使用

git stash list 查看所有stash git stash apply 0 应用序号为0那个stash并且不删除它 git stash pop 0 应用序号为0那个stash并且删除删除删除它 git stash save "env" stash当前的改动并且取...

-___-
今天
1
0
C# webservice 配置总结

为了方便下次查看,把总结配置文件放这里,看的方便。 <?xml version="1.0" encoding="utf-8"?><!-- 有关如何配置 ASP.NET 应用程序的详细消息,请访问 http://go.microsoft.com/f...

轻轻的往前走
今天
0
0
SpringCloud之Eureka

Eureka简介 什么是Eureka? Eureka是一种基于rest提供服务注册和发现的产品: Eureka-Server: 用于定位服务,以实现中间层服务器的负载平衡和故障转移。 Eureka-client:用于服务间的交互,内...

lc_fly1
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部