JavaScript阻止事件冒泡
今天在自学敲代码的时候发现了一个问题,当时的例子如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#div1{
height: 200px;
width: 200px;
background-color: #3b7796;
}
#btn{
margin: 50px;
}
</style>
<script>
function fn1(){
alert("this is div");
} function fn2(){
alert("this is btn");
}
</script>
<body>
<div id="div1" onclick="fn1();">
<button id="btn" onclick="fn2();">btn</button>
</div>
</body>
</html>
在我点击 btn 之后,会触发div上的点击事件,就会看到2个提醒框。
这个原因就是因为事件冒泡造成的,修改代码
function fn2(e){ //这里做浏览器兼容,如果提供了event 就说明他不是IE
if(e && e.stopPropagation){
e.stopPropagation();
}else {
//IE方式处理事件冒泡
window.event.cancelBubble = true;
} alert("this is btn");
}
这样就阻止了事件冒泡。
JavaScript阻止事件冒泡的更多相关文章
- JavaScript 阻止事件冒泡的实现方法
JavaScript 阻止事件冒泡,无使用其它插件来辅助,原生JS代码,考虑到浏览器的兼容性问题,这里对IE/火狐.Operating以及Chrome都有针对性的判断,代码如下: function c ...
- javascript阻止事件冒泡的兼容写法及其相关示例
//阻止事件冒泡的兼容写法 function stopBubble(e){ //如果提供了事件对象,则是一个非IE浏览器 if(e && e.stopPropagation) //因此 ...
- JavaScript阻止事件冒泡(兼容IE、Chrome、FF)
这里仅仅是一个简单代码demo,因为时间问题并未做深入研究,因为今天做项目时要用到阻止事件冒泡的内容,找了好多才找到一个可以使用的,特记录之. <!DOCTYPE HTML> <ht ...
- javascript 阻止事件冒泡 cancelBubble
javascript简单的阻止事件冒泡,可以使用事件的cancelBubble方法为true: html部分 <button id="btn1">点击显示div< ...
- javascript阻止事件冒泡和浏览器的默认行为
1.阻止事件冒泡,使成为捕获型事件触发机制. 1 function stopBubble(e) { 2 //如果提供了事件对象,则这是一个非IE浏览器 3 if ( e && e.st ...
- javascript 阻止事件冒泡和阻止默认事件对比
公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件. 先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并 ...
- javascript 阻止事件冒泡
阻止冒泡 冒泡简单的举例来说,儿子知道了一个秘密消息,它告诉了爸爸,爸爸知道了又告诉了爷爷,一级级传递从而引起事件的混乱,而阻止冒泡就是不让儿子告诉爸爸,爸爸自然不会告诉爷爷了. 举个栗子: 父容器是 ...
- javascript阻止事件冒泡的方法
有的时候我们需要实现这样的功能: 点击某个蒙版,该蒙版消失,但是如果点击蒙版上的某个元素,希望蒙版不消失,这就需要用到阻止事件的冒泡了 html: <div id="outer&quo ...
- JS如果阻止事件冒泡和浏览器默认事件
原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...
随机推荐
- C#向文件写、读数据
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- oracle Can't connect to X11 window server using ':0.0' /Checking monitor: must be configured to display at least 256 colors解决方法
Can't connect to X11 window server using ':0.0' 解决方法 1. 以oracle 用户登陆X window 或者 2. root 身份执行 # xhost ...
- Java - 反射机制(Reflection)
Java - 反射机制(Reflection) > Reflection 是被视为 动态语言的关键,反射机制允许程序在执行期借助于 Reflection API 取得任何类的 ...
- C语言的面向对象设计 —— 对 X264/FFMPEG 架构探讨
1.为什么要用C语言 直到今天,C语言虽然不是使用人数最多的语言了,但是C没有老去,在很多的核心系统代码里,依然跑的是设计精美的C,绝大多数的嵌入式开发核心库软件是C开发的,多数标准算法是基于标准C设 ...
- stagefright框架(七)-Audio和Video的同步
讲完了audio和video的处理流程,接下来要看的是audio和video同步化(synchronization)的问题.OpenCORE的做法是设置一个主clock,而audio和video就分别 ...
- WPF实现窗体最小化后小图标在右边任务栏下
一 基本功能 1. 这里是用 NotifyIcon 控件来实现,但 WPF 下没有 NotifyIcon 控件,怎么办,用 WinForm 下的呗. 先引用 .NET 自带的两个程序集 Syste ...
- js 行列操作
function insertRow() { var tbl = document.getElementById("tbCarModel"); var rowLen = tbl.c ...
- android 5.0新特性CardView教程
CardView 是android5.0新加入的特性,大家先别着急,由于谷歌出了cardview的兼容包,也就是android.support.v7.widget.CardView包,所以在5.0以下 ...
- c++网络通信(与服务器通信聊天)和c#网络通信
c++网络通信(有待整理) 链接:http://pan.baidu.com/s/1i3nMLKT 密码:ksi8 c#网络通信(tcp/udp两部分) TCP发送端: using System; us ...
- ubuntu安装jira步骤
背景:前些日子在原来的一台云主机上已经部署了一个jira系统,使用一段时间后发现jira占用很多的系统资源,导致主机上的其他服务无法正常工作,于是老大新注册了一个云主机专门用于运行jira,可见公司对 ...