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. ...
随机推荐
- [luogu1131][bzoj1060][ZJOI2007]时态同步【树形DP】
传送门:https://www.luogu.org/problemnew/show/P1131 题目大意 给你一棵树,每条边有边权,要求增加一些边的边权,使得根节点到每个叶子节点的距离相等,求出最少共 ...
- cf786E ALT (最小割+倍增优化建图)
如果把“我全都要”看作是我全不要的话,就可以用最小割解决啦 源点S,汇点T 我们试图让每个市民作为一个等待被割断的路径 把狗狗给市民:建边(S,i,1),其中i是市民 把狗狗给守卫:建边(j,T,1) ...
- OI生涯回忆录 2017.9.10~2018.11.11
然而并没有退役 为了这两天,也准备了一年. 高一零基础的蒟蒻,NOIP2017仅有80pts 之后看着luogu的倒计时, 300天,200天,100天,30天, 直到10天.1天. 10号,11号的 ...
- Django model中的 class Meta 详解
通过一个内嵌类 "class Meta" 给你的 model 定义元数据, 类似下面这样: class Foo(models.Model): bar = models.CharFi ...
- 简单认识python(一)
最近本宝宝被一部小说迷的神魂颠倒的,在网络上四处找免费的小说资源,一直哭唧唧的等待着每天更新的一章.实在是太可怜了,本宝宝决定自己学python,自己抓包小说. 既然知道目的地了,那就和本宝宝一起打怪 ...
- 使用react封装评论组件
首先看我的效果图 我在评论框中输入数据,会在页面进行显示 这个效果图我们进行拆分就是,一个评论组件,一个大的评论列表组件,一个小的评论组件 首先整个页面中有的是我们的评论组件和列表组件 我们输入评论点 ...
- Microsoft JET Database Engine 错误 '80004005' 未指定错误
Microsoft JET Database Engine 错误 '80004005'未指定错误 =====解决=======出现这种“未指定错误”时,可以尝试重新注册ASP脚本解释链接库文件在CMD ...
- python高级数据可视化视频Dash1
在谷歌浏览器输入http://127.0.0.1:8050/后,回车,看到下图可视化结果 # -*- coding: utf-8 -*- """ Created on S ...
- HTTP协议和SOCKS5协议
HTTP协议和SOCKS5协议 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 我们平时上网的时候基本上是离不开浏览器的,尤其是搜索资料的时候,那么这个浏览器是如何工作的呢?用的又是 ...
- vue基础篇---class样式绑定
因为class的绑定在实际的工作中会经常用到.所以特意记录一下,有好几种方法. 对象绑定方法,另外一个值来控制显示隐藏 <!DOCTYPE html> <html lang=&quo ...