event.stopPropagation()与event.preventDefault()
<div id='div0'>
<div id='div1'>
<a href="#" id='div2'>2222</a>
</div>
</div>
window.onload=function(){
var div0=document.getElementById('div0');
var div1=document.getElementById('div1');
var div2=document.getElementById('div2');
div0.onclick=function(e){
alert('00');
}
div1.onclick=function(e){
alert('11');
}
div2.onclick=function(e){
alert('22');
} } // 点击22222后,以次弹出22,11,00(事件冒泡)
(1)event.preventDefault()表示阻止默认事件发生:如a标签的跳转事件
我们给a标签添加该事件,则a不再跳转。
div0.onclick=function(e){
alert('11');
e.preventDefault();
}
(2)event.stopPropagation() 表示阻止冒泡事件发生:冒泡指的是向上层冒泡,不影响他的子元素
例如:我们给div1 添加阻止冒泡事件,div2依然会触发,但是div0不会。
div1.onclick=function(e){
alert('11');
e.stopPropagation();
}
// 依次弹出 22, 11
event.stopPropagation()与event.preventDefault()的更多相关文章
- 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return fal的区别
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...
- JS 之 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别
在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时 ...
- event.stopPropagation(),event.preventDefault()和return false的区别
event.stopPropagation(),event.preventDefault()和return false的区别 1.event.stopPropagation()方法 这是阻止事件的冒泡 ...
- 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别
1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, ...
- event.stopPropagation()和event.preventDefault()
1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, ...
- event.stopPropagation()和event.preventDefault(),return false的区别
我写公司的官网遇到一个问题,轮播图的上一层有一块内容,用鼠标拖动那块内容的时候下一层的轮播图也会跟着拖动,而上面的那层的内容是不会动的,我想这就是冒泡事件在作祟了吧 跟冒泡事件相关的,我想到三个: 1 ...
- vue 中 event.stopPropagation() 和event.preventDefault() 使用
1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向document上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开 ...
- event.stopPropagation与event.preventDefault的区别
1.event.stopPropagation 停止事件的传播,阻止它被分配到其它Dom节点.但是不能阻止同一Dom节点上的其它事件句柄被调用. 注:不同Dom节点的事件必须是一致的.如父节点和子节点 ...
- event.stopPropagation()、event.preventDefault()与return false的区别
做小demo时经常用到return false来取消默认事件,但一直不是很懂它和preventDefault()等的区别,今天查了查文档和大神们的博客,在这里对相关知识点做一个总结 首先开门见山,总结 ...
随机推荐
- OC基础--构造方法 id类型
new方法实现原理: new做了三件事情 1.开辟存储空间 + alloc 方法 2.初始化所有的属性(成员变量) - init 方法 3.返回对象的地址 [Person new]; == [[Pe ...
- NoClassDefFoundError
//Java对象转化json格式 public static void toJsonByJettisonMappedXmlDriver(){ try { User user = getUser(); ...
- 进程和线程及Linux下的编程
一.概述 进程和线程网络上有一堆解释,我不喜欢抄袭,也不喜欢套用太教科书的说法.就以我自己的理解来说说进程和线程吧,当然自己的理解肯定不是很严谨,但是理解起来应该会比教科书快一点.进程和线程都可以认为 ...
- 如何使用.NET开发全版本支持的Outlook插件产品(三)——全面控制
插件项目所有代码都已经上传至 https://github.com/VanPan/TestOutlookAdding 进阶基础--COM查看 首先,对于Outlook对象模型,MSDN早就有非常详细的 ...
- AngularJs的UI组件ui-Bootstrap分享(七)——Buttons和Dropdown
在ui-Bootstrap中,Buttons控件和Dropdown控件与form表单中的按钮和下拉框名字很像,但实际上这两个控件有新的含义. 先说Buttons,它是一组按钮,用来实现form表单中的 ...
- hibernate 返回新插入数据的Id
例如 表明 studentInfo String sql="set set nocount on studentInfo(列名,列名) values('值','值');select @@id ...
- shared_ptr:资源管理利器
如果你还在使用传统的C++,那么可以肯定堆内存的管理让你头痛过!在传统的C++领域,堆内存管理上我们能借用的现成工具就只有auto_ptr.但是很不幸用auto_ptr管理堆内存简直就是个错误.aut ...
- wp8开发笔记之应用程序真机发布调试
写在前面的话: 相信很多和我一样关注wp8动态以及已经开发了一些wp8应用程序的朋友们都遇到过这样的问题,写的程序在模拟器上进行调试总是显的没什么说服力,想拿真机进行实际测试, 该怎么办才好呢? 进行 ...
- Java 验证码工具类
package com.wuyu.util; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import ...
- Java—工厂模式
工厂模式: public interface Cookie { public abstract void run (); } public abstract class CookieFactory { ...