<html>

<head>

<script type="text/javascript">

function fnclick1(){

    alert("父元素弹窗")

}

function fnclick2(e){

    //阻止跳转到其它页面（如提交表单跳转等）

    //e.preventDefault();

    //阻止点击事件向上冒泡

    e.stopPropagation();

    alert("子元素弹窗");

}

</script>

</head>

<body>

<div onclick="fnclick1()">

    父点击事件

    <div onclick="fnclick2(event)">

       子点击事件

    </div>

</div>

</body>

</html>

js阻止点击事件的冒泡的实现的更多相关文章

  1. js模拟点击事件实现代码

    js模拟点击事件实现代码 类型:转载 时间:2012-11-06 在实际的应用开发中,我们会常常用到JS的模事件,比如说点击事件,举个简单的例子,点击表单外的"提交"按钮来提交表单 ...

  2. JS 阻止浏览器默认行为和冒泡事件

    JS 冒泡事件   首先讲解一下js中preventDefault和stopPropagation两个方法的区别: preventDefault方法的起什么作用呢?我们知道比如<a href=& ...

  3. JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题

    javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...

  4. vue.js click点击事件获取当前元素对象

    Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!', ...

  5. jquery/js记录点击事件，单击次数加一，双击清零

    目的:点击按钮,点击后在网页上显示点击次数,双击清零 实现:js或者jquery 代码如下: <%@ page language="java" contentType=&qu ...

  6. position布局影响点击事件以及冒泡获取事件目标

    在编写功能时总是会出现很多意想不到的问题,现在就讲讲我遇到的两个问题,通过举一个相似的例子来解说. <1> 元素互相独立,不存在包含于被包含 选择城市的按钮,为它绑定点击事件,点击后就弹出 ...

  7. selenium自动化之js处理点击事件失效

    有时候,元素明明已经找到了,使用click()就是无法触发点击事件(当然,这种情况十分少见,至少我只遇到过一次).下面告诉大家这种场景的解决方案. 使用js代码来点击[博客园]这个按钮 代码: #!/ ...

  8. JS——按钮点击事件累加注册问题

    最近在工作上遇到一个点击事件累加的问题,为元素添加点击事件效果,但是总是效果失败,最后发现点击事件被执行了多次,上网查了一下,下边就是解决这个问题的几种思路 案列引自 踮起脚尖眺望6 $(" ...

  9. js利用点击事件做一个简单的计算器

    先放一个样式图: 源代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

随机推荐

  1. base64模块 简单了解

    base64,字符串文本编码解码,方便数据进行传输 import base64 '''编码解码''' st = 'ni hao'.encode('utf8') result = base64.b64e ...

  2. windows 下 logstash 安装启动

    最新在研究elastic stack (elk)  : logstash 安装,下载最新版本的logstash: 点击打开链接 解压到磁盘根目录下:在logstash>bin 1.目录下创建:l ...

  3. [bzoj1218][HNOI2003]激光炸弹_暴力

    激光炸弹 bzoj-1218 HNOI-2003 题目大意:在笛卡尔坐标系上有n个点,问一个平行于坐标轴的r*r的正方形可以最多覆盖多少个目标. 注释:$1\le n \le 10000$,$1\le ...

  4. Linux查看文件内容命令：less（转）

    less与more类似,但使用less可以随意浏览文件,而more仅能向前移动,却不能向后移动,而且less在查看之前不会加载整个文件. 语法 less [参数] 文件 参数说明: -b <缓冲 ...

  5. MEAN框架学习笔记

    MEAN框架学习笔记 MEAN开发框架的资料非常少.基本的资料还是来自于learn.mean.io站点上的介绍. 于是抱着一种零基础学习的心态,在了解的过程中,通过翻译加上理解将MEAN框架一点点消化 ...

  6. 4443: [Scoi2015]小秃玩矩阵|二分答案|匈牙利

    第K大看成第K小各种WA. .. 第K大也就是第n−K+1小.所以就能够愉快的二分答案了 二分答案找出比当前答案小的数的位置的坐标.推断一下能否够选出满足不在同一行同一列的n−K+1个数,然后就能够愉 ...

  7. sqlserve 数据类型具体解释

    decimal   精确数值型  decimal 数据类型能用来存储从-10的38次幂-1到10的38次幂-1的固定精度和范围的数值型数据.使用这样的数据类型时,必须指定范围和精度. 范围是小数点左右 ...

  8. 软件project师周兆熊给IT学子的倾情奉献

    [来信] 贺老师: 你好,我是中兴通讯的一名软件开发project师,名叫周兆熊. 近期看了您的新书<逆袭大学:传给IT学子的正能量>,感觉你真心为当代学子答疑解惑.非常值得敬佩! 从上大 ...

  9. maven创建web报错failure to transfer org.codehaus.plexus

    failure to transfer org.codehaus.plexus:plexus:pom:2.0.5 from http:// repo.maven.apache.org/maven2 w ...

  10. 使用RabbitMQ放置自己定义对象（不借助序列化工具，比如protobuffer）V2.0

    怎样使用RabbitMQ盛放自己定义的对象呢?一般都会使用序列化工具在投放之前转换一次.从MQ取回的时候再逆序列化还原为本地对象.这里使用C++自带的强制类型装换,将本地对象的内存模型当做自然的序列化 ...