JS如何防止事件冒泡
<div style="height:30px;line-height:30px;background:#FF0;text-align:center;" id="zz"><a href="http://www.baidu.com">阻止事件冒泡</a></div>
<script type="text/javascript">
var $ = function(id){
return document.getElementById(id);
} $('zz').onclick = function(e){
$('zz').innerHTML += ",事件已经点击了!";
var e = e||window.event;
if (e.stopPropagation)
{ e.stopPropagation(); // 阻止冒泡
e.preventDefault(); // 阻止默认事件
}
else
{
e.cancelBubble =true; // 阻止冒泡
e.returnValue = false; // 阻止默认事件
} }
document.documentElement.onclick = function(e){
$('zz').innerHTML += ",冒泡没阻止成功!";
}
</script>
e.preventDefault();
这句话怎么理解。组织默认事件是什么意思。html元素中有很多元素是具备默认事件的,a标签会跳转,submit会自动提交,reset会重置表单。
e.preventDefault()会阻止这些默认操作。 重要提醒,阻止叶子节点的冒泡意思最大,或者说儿子节点的阻止冒泡比阻止长辈节点的意义更加重大。
JS如何防止事件冒泡的更多相关文章
- JS中点击事件冒泡阻止
JS中点击事件冒泡阻止 解析: 一个div层'out',内含有一个div层'in'.如下: 两个层都绑定了点击事件,但是点击in层的时候,点击事件会出现冒泡现象,同时也会触发out层的点击事件. 但是 ...
- js /jquery停止事件冒泡和阻止浏览器默认事件
1>js阻止冒泡事件 var el = window.document.getElementById("a"); el.onclick = function (e) { // ...
- js之阻止事件冒泡(待修改)和阻止默认事件
阻止默认事件(event.stopPropagation()): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
- JS如果阻止事件冒泡和浏览器默认事件
原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...
- JS学习之事件冒泡
(1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什 ...
- 原声js,取消事件冒泡,点击按钮,显示box,点击屏幕其他地方,box隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS中的事件冒泡——总结
一. 有话要说 事件冒泡这个话题已经被园子里的朋友说透了,已经没什么要讲的了,但是由于呢我这边有个小问题刚好跟这个事件冒泡有关,就突然性想写个总结:一方面是给自己增加印象,另一方面给园子的新手们,提供 ...
- JS中的事件冒泡和事件捕获
事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target). 事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签. 用图示表示如下: 1.冒泡事件: ...
- js中阻止事件冒泡和浏览器默认行为
在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题.[兼容IE和FF] ...
- JS如何阻止事件冒泡
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx. ...
随机推荐
- MT【230】一道代数不等式
设$a,b,c>0,$满足$a+b+c\le abc$证明:$\dfrac{1}{\sqrt{1+a^2}}+\dfrac{1}{\sqrt{1+b^2}}+\dfrac{1}{\sqrt{1+ ...
- KMP模板(KMP)
放一个模板在这里搞事情...... 学KMP的话找SYCstudio吧(博客链接) 代码(多组数据,\(O(n)\)求一个串是否在另一个串里出现过) #include<cstdio> #d ...
- 【BZOJ3507】通配符匹配(哈希,动态规划)
[BZOJ3507]通配符匹配(哈希,动态规划) 题面 BZOJ 题解 对于匹配唯一存在影响的只有通配符,而\(?\)的影响也并不大,所以唯一需要仔细考虑的是\(*\). 考虑一个\(dp\),设\( ...
- qq空间爬取
QQ_spider github传送门 QQ空间spider总结 花了将近3天吧,完成了低配版qq空间的爬虫,终于能上线刚一波了,还是蛮期待的. 流程很简单,模拟登录 ==>采集==>保存 ...
- Redis中的简单动态字符串
Redis没有直接使用C语言传统的字符串表示(以空字符结尾的字符数组,以下简称C字符串),而是自己构建了一种名为简单动态字符串(simple dynamic string,SDS)的抽象类型,并将SD ...
- Hadoop、Hbase基本命令及调优方式
HDFS基本命令 接触大数据挺长时间了,项目刚刚上完线,趁着空闲时间整理下大数据hadoop.Hbase等常用命令以及各自的优化方式,当做是一个学习笔记吧. HDFS命令基本格式:Hadoop fs ...
- 转载:C++类内存分布
本文转自:http://www.cnblogs.com/jerry19880126/p/3616999.html,原文写的非常好,从中学到了虚继承的概念,也学会了用VS查看内存分布. 说下C++内存分 ...
- typescript接口(学习笔记非干货)
typescript的核心原则之一就是对所具有的shape类型检查结构性子类型化 One of the core principles of typescript is to check struct ...
- java常用的运算符
Java 语言中常用的运算符可分为如下几种: Ø 算术运算符 Ø 赋值运算符 Ø 比较运算符 Ø 逻辑运算符 Ø 条件运算符
- 使用pycharm开发代码上传到GitLab和GitHub
使用pycharm开发代码上传到GitLab和GitHub 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 我这里主要是针对局域网的自减的GitLab服务器,python开发工程师如 ...