js阻止冒泡

<html>

<title></title>

<head>

    <meta charset="utf-8">

    <style type="text/css">

        .divone{width:100px;height:100px;background:black;position: relative;cursor: pointer}

        .divchild{position: absolute;margin:10px;width:50px;height:50px;background:white;cursor: pointer}

    </style>

    <script type="text/javascript">

        function divone(){

            //这里是divone事件的代码

            console.log('divone事件');

            stopPropagation();

        } 

        function divchild(){

            //这里是divchild事件的代码

            console.log('divchild事件');

            stopPropagation();

        }

        function stopPropagation(e) {

            e = e || window.event;

            if(e.stopPropagation) { //W3C阻止冒泡方法

                e.stopPropagation();

            } else {

                e.cancelBubble = true; //IE阻止冒泡方法

            }

        }

    </script>

</head>

<body>

    <div class="divone" onclick="divone(this)"> 

        <div class="divchild" onclick="divchild(this)"></div> 

    </div> 

</body>

</html>

JS点击子元素不触发父元素点击事件(js阻止冒泡)的更多相关文章

  1. JS子元素oumouseover触发父元素onmouseout

    原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...

  2. jquery:iframe里面的元素怎样触发父窗口元素的事件？

    例如父窗口定义了一个事件. top: $(dom1).bind('topEvent', function(){}); 那么iframe里面的元素怎样触发父窗口dom1的事件呢?这样吗? $(dom1, ...

  3. html 子元素和父元素都监听了 click 事件，点击子元素时为何先触发的是父元素的 click 事件？

    先上一段代码,点击子元素时先触发的是父元素的 click 事件 <html> <head> <script type="text/javascript" ...

  4. 二、vue学习--父元素如何获取子元素的值，子元素如何获取父元素的值

      下图是父元素: 下图是子元素,获取父元素的值,使用props定义属性,这样就可以获取到父元素上传过来的set .place.type,拿到值就可以做一些自己的逻辑处理 二.子元素给父元素传值? 下 ...

  5. 使用flex防止fit-content子元素冲出父元素宽度的方法

    父元素设置了min-width:fit-content后,其宽度由子元素的宽度来决定 <!DOCTYPE html> <html lang="en"> &l ...

  6. CSS 解决z-index上层元素遮挡下层元素点击事件问题

    解决z-index上层元素遮挡下层元素点击事件问题 by:授客 QQ:1033553122 开发环境 Win 10 element-ui  "2.8.2" Vue 2.9.6 需求 ...

  7. (网页)angular中实现li或者某个元素点击变色的两种方法(转)

    转自脚本之家: 本篇文章主要介绍了angular中实现li或者某个元素点击变色的两种方法,非常具有实用价值,需要的朋友可以参考下 本文介绍了angular中实现li或者某个元素点击变色的两种方法,分享 ...

  8. 【百度统计】设置页面元素点击事件转化pv、uv

    html元素点击事件内添加代码:_hmt.push(['_trackEvent', category, action, opt_label, opt_value]); 1. '_trackEvent' ...

  9. html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡

    如果子元素和父元素都有点击事件,会出现点击事件冒泡的情况. 1.如何避免冒泡: html: <html> <head></head> <body> &l ...

随机推荐

  1. WEB基础原理——理论复习

    基本WEB原理 1. Internet同Web的关系 1.1互联网 全世界最大的局域网. 来源美国国防部的项目用于数据共享 没有TCP/IP之前最开始只能1000台电脑通信(军用协议) 1.2 万维网 ...

  2. Android调用webservice的例子

    1.需要一个ksoap2-android-assembly-2.5.2-jar-with-dependencies.jar的架包. 2.需要知道webservice的命名空间 // WSDL文档中的命 ...

  3. EXD_BAD_ACCEEE

    iOS开发过程中,普通的bug通常较容易定位问题所在,但是,EXD_BAD_ACCEEE问题却比较不易查找问题.本文记录下解决EXD_BAD_ACCEEE问题的过程.首先说一下 EXC_BAD_ACC ...

  4. 分享一下Java写的坦克大战游戏，相信很多人小时候玩过

    写在前面 程序是五六年前读书的时候写的,里面会有一些不规范的,我已经将代码传到github上了,有时间会优化修改. 程序运行机制 定义了一个JPanel,然后每隔一小段时间重绘一遍. 重绘的内容如下: ...

  5. idea缓存

    昨天idea出现了一个奇怪的问题: 项目没有按我指定的配置运行,按cmd+:可以看输出.而是运行了配置包下的test环境的配置, 先一看,test环境被初始化为资源包并且在输出目录上, 先取消(fil ...

  6. Hanoi问题java解法

    用什么语言解法都差不多,思路都是一样,递归,这其中只要注重于开始和结果的状态就可以了,对于中间过程,并不需要深究.(我细细思考了一下,还是算了.=_=) 代码其实很简单注重的是思路. 问题描述:有一个 ...

  7. VPN 部署方案

    VPN 对比: OpenVPN: 客户端连接太麻烦,放弃 PPTP VPN:版本较高的苹果手机没有 PPTP VPN 的连接方式,放弃 L2TP VPN:支持所有平台,客户端连接容易,最终选择部署 L ...

  8. [poj1741][tree] (树/点分治)

    Description Give a tree with n vertices,each edge has a length(positive integer less than 1001). Def ...

  9. angular学习笔记(二十八)-$http(6)-使用ngResource模块构建RESTful架构

    ngResource模块是angular专门为RESTful架构而设计的一个模块,它提供了'$resource'模块,$resource模块是基于$http的一个封装.下面来看看它的详细用法 1.引入 ...

  10. DeveloperExceptionPageMiddleware中间件如何呈现“开发者异常页面”

    DeveloperExceptionPageMiddleware中间件如何呈现"开发者异常页面" 在<ASP.NET Core应用的错误处理[1]:三种呈现错误页面的方式&g ...