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. Oracle研究专题：Oracle系统安装与配置

    最近开始研究Oracle数据库,盖因公司的系统要么Oracle要么是mysql吧. 作为一个IT工作者,没有碰过Oracle是一件很匪夷所思得事情. 想到过去几年,乃至接触IT行业开始就只有玩过sql ...

  2. 如何在SharePoint 当中使用纯JSOM上传任意二进制文件（小于2MＢ）

    在微软的官方网站上有关于如何在SharePoint当中使用JS创建一个简单的文本文件的例子,经过我的思考我觉得结合Html5特性的浏览器,是完全可以通过JS来读取到文件的内容的(这一部分的内容请大家自 ...

  3. android图片验证码--自绘控件

    自绘控件的内容都是自己绘制出来的 大致流程如下: 1.定义一个类继承view 使用TypedArray初始化属性集合 在view的构造方法中 有一个AttributeSet的参数 很明显是用来保存控件 ...

  4. iOS 应用程序生命周期

    开发应用程序都要了解其生命周期. 今天我们接触一下iOS应用程序的生命周期, iOS的入口在main.m文件: int main(int argc, char * argv[]) { @autorel ...

  5. DXGI 1.5新特性

    为了支持更具弹性和的输出设定和副本机制,DXGI1.5添加了下面这些功能: 高动态范围(HDR)和宽色域(WCG) 可变刷新率显示 复制输出 奉献和再生资源 高动态范围(HDR)和宽色域(WCG) H ...

  6. MySQL排序原理与案例分析

    前言      排序是数据库中的一个基本功能,MySQL也不例外.用户通过Order by语句即能达到将指定的结果集排序的目的,其实不仅仅是Order by语句,Group by语句,Distinct ...

  7. SQL连接操作符介绍（循环嵌套, 哈希匹配和合并连接）

    今天我将介绍在SQLServer 中的三种连接操作符类型,分别是:循环嵌套.哈希匹配和合并连接.主要对这三种连接的不同.复杂度用范例的形式一一介绍. 本文中使用了示例数据库AdventureWorks ...

  8. xml节点查询

    关键词: XName XElement Descendance() node.Name.LocalName 示范: List<ClaimSheetBaseDto> list = new L ...

  9. Python的模块引用和查找路径

    模块间相互独立相互引用是任何一种编程语言的基础能力.对于“模块”这个词在各种编程语言中或许是不同的,但我们可以简单认为一个程序文件是一个模块,文件里包含了类或者方法的定义.对于编译型的语言,比如C#中 ...

  10. python写红包的原理流程包含random,lambda其中的使用和见简单介绍

    Python写红包的原理流程 首先来说说要用到的知识点,第一个要说的是扩展包random,random模块一般用来生成一个随机数 今天要用到ramdom中unifrom的方法用于生成一个指定范围的随机 ...