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. .NET使用Task动态创建多任务多线程并行程序计算Redis集群keys计算

    Task是一个很好用的多任务处理类,并且通过Task可以对任务进行很好的控制. 下面将通过代码实现Redis集群在使用IServer.keys时通过多任务对多个服务器示例进行并行计算,并对返回key做 ...

  2. 外观(Facade)模式

    外观模式:为子系统中的一组接口提供一个一致的界面.此模式定义了一个高层接口,这个接口使得这一子系统更加容易使用 在软件开发中,有时候为了完成一项较为复杂的功能,一个客户类需要和多个业务类交互,而这些需 ...

  3. NodeJs针对Express框架配置Mysql进行数据库操作

    Express版本:4.14.1 说明:如下配置以express为例进行配置并进行测试,当然mysql中间件也可以在nodejs中单独使用. 参考:NodeJs的Mysql中间件Github地址 1. ...

  4. Django中的路由配置简介

    Django中的路由配置简介 路由配置(URLconf)就是Django所支撑网站的目录.其实,我们利用路由交换中的"寻址"的概念去理解Django的路由控制会简单很多,它的本质就 ...

  5. [UE4]优先级与相关性

    一.优先级 每个 Actor 都有一个名为 NetPriority 的浮点变量.这个变量的数值越大,Actor 相对于其他“同伴”的带宽就越多.和优先级为 1.0 的 Actor 相比,优先级是 2. ...

  6. [UE4]蓝图中清空变量值或设置为null

    不赋值就会被设置为null了. 对象是否可使用,也可以这样判断

  7. 0001 - Spring MVC中的注解

    1.概述 Spring MVC框架提供了功能强大的注解,大大简化了代码开发的同时也提升了程序的可扩展性 2.注解 2.1.@RequestMapping Spring MVC通过@RequestMap ...

  8. FileMaker Server连接SQL Server测试

    用FM测试了一把扫二维码.效果还不错,简单的设置几下就可以上线,使用Iphone扫二维码进行盘点以及更新照片功能.接下来测试下下ODBC连接. FMS连接SQL Server测试 1. 在FMS服务器 ...

  9. 4G模块*99#拨号上网

    操作系统:win10 模块型号:quectel EC20 CE FAG 4G模块拨号步骤如下: 1. 打开网络和internet设置 2. 选择“拨号” 3. 选择“设置新连接” 4. 选择“拨号调至 ...

  10. 几个常用的SQL 时间函数

    --当月第一天declare @startFirstDate datetimeset @startFirstDate=dateadd(dd,datediff(dd,0,getdate()),-day( ...