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. 基于React,Redux以及wilddog的聊天室简单实现

    本文主要是使用ReactJs和Redux来实现一个聊天功能的页面,页面极其简单.使用React时间不长,还是个noob,有不对之处欢迎大家吐槽指正. 还要指出这里没有使用到websocket等技术来实 ...

  2. Android关于listView的BaseAdapter以及getView的三级优化

    1.4个重写方法的含义 自定义Adapter继承自BaseAdapter(通用适配器)   getCount(); getItem(); getItemId(); getViewTypaCount() ...

  3. iOS类中的属性设置背景色（统一）

    unsigned int count; objc_property_t *properties = class_copyPropertyList([self class], &count); ...

  4. 基于Python+Django的Kubernetes集群管理平台

    ➠更多技术干货请戳:听云博客 时至今日,接触kubernetes也有一段时间了,而我们的大部分业务也已经稳定地运行在不同规模的kubernetes集群上,不得不说,无论是从应用部署.迭代,还是从资源调 ...

  5. iOS系统分析（二）Mach-O二进制文件解析

    ➠更多技术干货请戳:听云博客 0x01  Mach-O格式简单介绍 Mach-O文件格式是 OS X 与 iOS 系统上的可执行文件格式,类似于windows的 PE 文件 与 Linux(其他 Un ...

  6. 【代码笔记】iOS-页面调的时候隐藏工具条

    代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. se ...

  7. 怎么修改与设置.jsp文件属性？

    1.首先  打开  >>  Myeclipse或Eclipse.(我用的是Myeclipse) 2.打开  >>  Window  >>  Preferences  ...

  8. python学习4

    1.python中的函数的参数,这个参数的设置比起C比较特殊的地方就是参数可以预保留的.这个意思就是可以保留下来不填写,然后需要的时候再传入. 这个调用之后结果如下,另外可以看出python比起C来一 ...

  9. grub2配置显示系统选择菜单（ubuntu 14.04）

    背景: 有一次遇到过安装的新的内核后,ubuntu并没有显示选择内核的grub菜单,按shift键才会弹出,有时候shift按得不准就又进入了不是想进入的那个系统. 配置方法: sudo vim /e ...

  10. dubbox 的各种管理和监管

    dubbo官方自带了dubbo-admin及dubbo-simple/dubbo-monitor-simple二个子项目用于服务治理及服务监控. 一.dubbo-admin的部署 这个比较简单,编译打 ...