关于javascript冒泡与默认事件的使用详解
发布时间:2023-05-16 07:16:32
标签:javascript,冒泡,默认事件
对于javascript的冒泡,我一直误解它了,
冒泡,即是从底层往外blow blow blow ...
惭愧的是,我一直以为阻止冒泡是阻止父元素往子元素传递事件……
贴上一串代码以便往后回顾!
<script type="text/javascript">
window.onload=function(){
var a=document.getElementById("a");
var b=document.getElementById("b");
var c=document.getElementById("c");
var c=document.getElementById("d");
a.onclick=function(e){
this.style.background="#000";
};
b.onclick=function(e){
this.style.background="#ccc";
//阻止事件冒泡
window.event.cancelBubble = true;//IE8以下
e.stopPropagation();
};
d.onmousedown=function(e){
//阻止默认事件,比如在chrome下图片有拖拽默认行为
window.event.returnValue = false;
e.preventDefault();
}
}
</script>
Html部分
<div id="a" style="width:300px;height:300px;background:red;overflow:hidden;">
<div id="b" style="width:200px;height:200px;background:green;margin:50px 0 0 50px;overflow:hidden;">
<div id="c" style="width:100px;height:100px;background:yellow;margin:50px 0 0 50px;overflow:hidden;">
<img src="240x240.jpg" width="50" height="50" id="d" />
</div>
</div>
</div>
另一个例子:
<script type="text/javascript">
window.onload=function(){
document.getElementById("test").addEventListener('click',function(e){
alert('aaaa')
},false);
document.getElementById("test1").addEventListener('click',function(e){
alert('bbb')
e.stopPropagation();
},false)
}
</script>
<style type="text/css">
#test1{width:100px;height:100px;background:#ff0}
#test2{width:100px;height:100px;background:#ff0}
</style>
<div id="test" style="width:100px;height:100px;background:#f60;padding:20px;">
<div id="test1"></div>
</div>
0
投稿
猜你喜欢
- Java CharArrayReader流一、CharArrayReader流定义API说明:该类实现了一个可用作字符输入流的字符缓冲区,即
- 要获取Java中的当前时间戳:Timestamp timestamp = new Timestamp(System.currentTimeM
- MyBatis查询返回null可能原因SQL语句查询条件有问题数据库中没数据返回字段与Entity的属性不对应解决方案针对 SQL
- 概述 这是一个自定义色盘,根据点,直线和圆的几何学加上hsv颜色模型完成技术点几何:圆的标准方程式:(x-a)²
- java8分组计算数量和计算总数package com.pig4cloud.pigx.admin.api.vo;import lombok.
- 为了解决在多个窗口之间的传值问题,我们可以通过设置静态类和静态变量的办法来实现窗口间值的传递窗体一代码//窗体1的代码using Syste
- 前言本文主要给大家介绍的是关于Java通过Class类获取Class对象的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的
- 前言在 Java 中通常对一些方法进行一些注解操作,但是很多注解在 Java 代码上没有问题,如果切换到 Kotlin 上时,如果继续使用这
- jpa配置多数据源教程很多,在Springboot2之后有一些变化,来看一下。application.yml如下spring:
- 基本思路服务器配置如下:192.168.159.50 gitlab服务器(Gitlab,内存至少5个G,要不根本跑不动)192.168.15
- private string CheckCidInfo(string cid) &
- 推荐第三种方式,简单快捷不卡。第一种:jjdxm_updateGitHub地址:jjdxmashl/jjdxm_update效果图:点击立即
- 用Stopwatch分段监控了一下,发现耗时最多的函数是SaveToExcel此函数中遍列所有数据行,通过Replace替换标签生成Exce
- 函数式接口(Functional Interface)就是一个有且仅有一个抽象方法,但是可以有多个非抽象方法的接口。函数式接口可以被隐式转换
- 在Android中,Activity主要负责前台页面的展示,Service主要负责需要长期运行的任务,所以在我们实际开发中,就会常常遇到Ac
- //计算字符串的MD5值 public string G
- 我们经常看到使用了ViewPager的App,在每页上面都会有一个滑块来标志当前处于哪一页。在PagerView包里有android.sup
- 概述:EventBus是一款针对Android优化的发布/订阅事件总线。主要功能是替代Intent,Handler,BroadCast在Fr
- 使用开源框架是,可以直接复制源代码到自己的项目(本人在Android Studio中操作报R程序包不存在),也可以使用jar包,下面记录一下
- 队列是其元素按照先进先出(FIFO)的方式来处理的集合。队列使用System.Collections.Generic名称空间中的泛型类Que