JS中点击事件冒泡阻止

解析：

一个div层'out'，内含有一个div层'in'。如下：

两个层都绑定了点击事件，但是点击in层的时候，点击事件会出现冒泡现象，同时也会触发out层的点击事件。

但是并不希望触发out的点击事件，只希望触发in层的点击事件，所以要阻止冒泡事件。

解决方法：

e.preventDefault()

案例代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>点击事件冒泡处理</title>

    <script type="text/javascript">

        var fun1 = function (e) {

            alert("我是父点击事件");

        }

        var fun2 = function (e) {

            e.stopPropagation();//阻止点击事件向上冒泡

            alert("我是子点击事件");

        }

    </script>

</head>

<body>

    <div onclick="fun1(event)" style="height:100px;background-color:black;color:white;text-align:center;border:1px solid red">

        父节点

        <div onclick="fun2(event)" style="margin-top:20px;border:1px solid red;height:30px">

            子节点

        </div>

    </div>

</body>

</html>

参考自：https://www.cnblogs.com/mdorg/p/5617408.html

　　　　http://blog.csdn.net/abb_chen/article/details/49406649

JS中点击事件冒泡阻止的更多相关文章

  1. js中点击事件方法三种方式的区别

    在javascript中,可以为某个元素指定事件,指定的方式有以下三种: 1.在html中,使用onclick属性 2.在javascript中,使用onclick属性 (1)注意函数名没有双引号. ...

  2. js 事件流和事件冒泡阻止

    js 事件流和事件冒泡阻止 事件流 当浏览器发展到第四代的时候(IE4与Netscape4)浏览器开发团队遇到一个有意思的的问题: 页面的哪一部分会拥有某个特定的事件? 比如在纸上画上一组同心圆,如果 ...

  3. js for循环中点击事件中无法获取每一个i值的问题

    好像是第二次遇到这个问题,必须要总结一下!! <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  4. window.open('') 火狐，IE事件冒泡处理，点击事件冒泡处理

    window.open('') 火狐,IE事件冒泡处理,点击事件冒泡处理 写PC下拉菜单的时候,hover样式显示下拉菜单,可能会这样写 <li class="xb_li1" ...

  5. 项目遇到的小问题（关于vue-cli中js点击事件不起作用和iconfont图片下载页面css样式乱的解答）

     第一个:关于vue-cli中js点击事件不起作用 在vue的methods方法queryBtnFun()中拼接html和click操作事件的时候,发现点击事件一起未起作用: 后来发现是DOM执行顺序 ...

  6. IOS的UIWebView中JS点击事件，需要加入cursor：pointer;属性才可以

    IOS的UIWebView中JS点击事件,需要加入cursor:pointer;属性才可以. Android的WebView可以支持外链样式,js文件:IOS则需要改为内嵌样式和JS文件.

  7. Android中点击事件的四种写法详解

    Android中点击事件的四种写法 使用内部类实现点击事件 使用匿名内部类实现点击事件 让MainActivity实现View.OnClickListener接口 通过布局文件中控件的属性 第一种方法 ...

  8. js 停止事件冒泡 阻止浏览器的默认行为（阻止超连接 # ）

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...

  9. js /jquery停止事件冒泡和阻止浏览器默认事件

    1>js阻止冒泡事件 var el = window.document.getElementById("a"); el.onclick = function (e) { // ...

随机推荐

  1. ALGO-18_蓝桥杯_算法训练_单词接龙(搜索)

    问题描述 单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头的字母,要求出以这个字母开头的最长的“龙”(每个单词都最多在“龙”中出现两次),在两个单词相连时,其重合 ...

  2. Windows下利用TortoiseSVN搭建本地SVN服务器

    写在前面: 安装TortoiseSVN时,图中这步要选择,才能同时安装后面需要的svnserve.exe 环境说明: Win 7 TortoiseSVN 1.7 搭建步骤: 0. 新建一个目录,做&q ...

  3. C#批量更新mongodb符合条件的数据

    默认情况下只会更新匹配的第一条 jingjiaanalyurl.Update(Query.EQ("auid", jingjiaitem.id), Update.Set(" ...

  4. java设计模式-Iterator

    Iterator模式 主要是用在容器的遍历上,其他的地方都不怎么用:理解一下,会用了就可以了:   1.背景 请动手自己写一个可以动态添加对象的容器: 代码: ArrayList.java(是自己实现 ...

  5. 学习笔记之人工智能（Artificial Intelligence）

    人工智能 - 维基百科,自由的百科全书 https://zh.wikipedia.org/wiki/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD 人工智能(英语:Artif ...

  6. 函数的进阶(动态参数,命名空间和作用域,函数的嵌套,gloabal和nonlocal关键字)

    1. 函数参数--动态传参 昨天已经解过了传参, 如果需要给一个函数传参,而参数又是不确定的. 或者我们给一个函数传很多参数, 我的形参就要写很多, 写起来就很麻烦, 这时我们可以考虑使用动态参数.形 ...

  7. 编码(encode和decode)

    一. 编码 1. ASCII编码 ASCII是最早的计算机编码,包含了英文字母(大小写),数字,标点等特殊符号,一共128个码位,最多只能用8位来表示(一个字节),ASCLL码最多256个位置,无法提 ...

  8. [UE4]正交

    一.如果两条直线是垂直的,那么就可以说这2条直线是正交的.既然有垂直,为什么还要有正交概念呢? 因为正交可以描述两个或者多个变量之间互不影响.互不干涉,而垂直是完全属于几何的术语. 二.具有正交关系的 ...

  9. [UE4]让子弹飞：抛射物子弹、瞬时子弹

    两种子弹: 1.瞬时子弹.(使用射线) 没有飞行时间,即打即中. 2.飞行的子弹. a.使用ProjectMovement(抛射物)组件 创建一个继承自“Actor”的蓝图“BP_LauncherBu ...

  10. 【 MAKEFILE 编程基础之二】MAKEFILE 书写规划以及语法规则！

    本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/gcc-makefile/768.html   ...