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 ...
随机推荐
- js库开发--参数传递及方法修改
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- Hadoop： HDFS 格式化时，出现 “ERROR namenode.NameNode: java.io.IOException: Cannot create directory /usr/hadoop/tmp/dfs/name/current”
原因是 没有设置 /usr/hadoop/tmp 的权限没有设置, 将之改为: chown –R hadoop:hadoop /usr/hadoop/tmp 查看:
- 图文讲解基于centos虚拟机的Hadoop集群安装，并且使用Mahout实现贝叶斯分类实例 （7）
接下来,我们开启hadoop集群. 如果之前打开过Hadoop,可能会发生lock的问题,解决方案:http://blog.csdn.net/caoshichaocaoshichao/article/ ...
- Foundation--NSDictionary+NSMutableDictionary
键值对 key(一般为字符串对象)---vaule(必须是对象) Person *p1 =[[Person alloc ]init]; Person *p2 =[[Person alloc ]init ...
- 创建一个基本的 Win32 窗口
#include <Windows.h> //Forward declarations bool InitMainWindow(HINSTANCE, int); LRESULT CALLB ...
- web.xml中<load-on-start>n</load-on-satrt>作用
如下面一段配置,我们再熟悉不过了: 我们注意到它里面包含了这段配置:<load-on-startup>1</load-on-startup>,那么这个配置有什么作用呢? 作用如 ...
- 《JavaScript Dom编程艺术》用例总结
页首HTML 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- Java多线程编程总结(精华)
Java多线程编程总结 2007-05-17 11:21:59 标签:多线程 java 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http ...
- Android动画的深入分析
一.AnimationDrawable的使用 详见:Drawable类及XMLDrawable的使用 补充:通过Animation的setAnimationListener()可以给View动画添加监 ...
- linux shell if语句
#!/bin/bash read -p "please input Y/N" keyWord if [ "$keyWord" == "Y" ...