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. Atitit 自然语言处理原理与实现 attilax总结

    Atitit 自然语言处理原理与实现 attilax总结 1.1. 中文分词原理与实现 111 1.2. 英文分析 1941 1.3. 第6章 信息提取 2711 1.4. 第7章 自动摘要 3041 ...

  2. iOS 报错汇总

    1. Unknown type name 'class'; did you mean 'Class' 问题解决方法 objectice-c 工程中的类(比如 类 A)使用 C++ 文件时  A.m 文 ...

  3. app字体被放大效果发虚

    IOS App所有字体被放大,显示效果发虚 小小程序猿 我的博客:http://daycoding.com 分析原因: 由于新版本上线更换了LaunchImage,没有注意美工给的图片尺寸,由于图片尺 ...

  4. MySQL 博客文章目录（2016-08-20更新）

    1 MySQL安装配置 Linux MySQL源码安装缺少ncurses-devel包 Linux平台卸载MySQL总结 Linux 卸载mysql-libs包出现错误 2  MySQL管理配置 My ...

  5. C#语句2——循环语句（for循环与for循环嵌套）

    循环:反复执行某段代码. 循环四要素:初始条件,循环条件,循环体,状态改变. for(初始条件;循环条件;状态改变) { 循环体 } break ——中断循环,跳出整个循环 continue——停止本 ...

  6. MySQL：procedure, function, cursor,handler

    Procedure & Function Procedure 语法: CREATE [DEFINER = { user | CURRENT_USER }] PROCEDURE sp_name ...

  7. SQLServer中Partition By 函数的使用

    今天群里看到一个问题,在这里概述下:查询出不同分类下的最新记录.一看这不是很简单的么,要分类那就用Group By;要最新记录就用Order By呗.然后在自己的表中试着做出来: 首先呢我把表中的数据 ...

  8. 安装phpstudy之后发现80端口被占用

    安装phpstudy之后发现80端口被占用: 进入cmd的界面,在输入"netstat -ano",按回车键后,会显示当前电脑中程序占用的端口和程序ID等等信息:看到第一条就是:0 ...

  9. win10用户文件夹重命名，启用administrator账户，删除文件夹时提示找不到该项目

    这一切都源自楼主洁癖一般的强迫症. 楼主在重置win10后的安装过程中用microsoft账户登录的电脑,发现用户文件夹名称怪怪的,于是想重命名一下.楼主发现重命名用户文件夹并不能简单地用F2搞定,于 ...

  10. 由Photoshop高反差保留算法原理联想到的一些图像增强算法。

    关于高反差保留的用处说明呢,从百度里复制了一段文字,我觉得写得蛮好的: 高反差保留就是保留图像的高反差部分,再说得真白些,就是保留图像上像素与周围反差比较大的部分,其它的部分都变为灰色.拿一个人物照片 ...