阻止事件冒泡、捕获、和默认事件
2015-09-16 17:52
169 查看
阻止事件冒泡、捕获的方法:e.stopPropagation();
阻止默认事件发生的方法:e.preventDefault();
默认事件就是就是浏览器自带的,不是我们写的方法,比如,你滑动浏览器滚动条的时候,页面会向下滚动!这是就是默认事件!
------------------------------------------------------------------------------------------------------------------------------------
先看这个事件监听的写法:obj.addEventListener(event,fn,useCapture)
obj : 触发事件对象
event:事件名
fn : 执行函数
useCapture:事件类型。 false表示:冒泡。true表示:捕获 默认情况是false
-------------------------------------------------------------------------------------------------------------------------------------
实例:
body中:
写上js:
上面的DIV结构是(按层次):document包含a,a包含b。即:document->a->b
此时我们点击最里面的b。页面会弹出 ‘你点击了b’ 然后再弹出 ‘你点击了a’ 然后还会弹出 ‘你点击了document ’
就是这是事件冒泡。
事件从最里层开始向外触发。
------------------------------------------------------------------------------------------------------------------------------------
阻止方式:e.stopPropagation();
对b事件进行修改:
<span style="font-family:Microsoft YaHei;">b.addEventListener('click',function(e){</span>
-------------------------------------------------------------------------------------------------------------------------------------
现在看事件捕获。
先将例子改造成事件捕获的形式:就是监听事件函数里多放个参数 true
<span style="font-family:Microsoft YaHei;"> <script>
window.onload=function(){
a.addEventListener('click',function(e){
alert("你点击了a");
},<span style="color:#ff0000;">true</span>) ;
b.addEventListener('click',function(e){
alert("你点击了b");
},<span style="color:#ff0000;">true</span>) ;
document.addEventListener('click',function(e){
alert("你点击了document")
},<span style="color:#ff0000;">true</span>) ;
}
</script></span>这个时候你再点击b 就会依次出现 ‘你点击了document ’ 然后再弹出 ‘你点击了a’最后是‘你点击了b’
即:事件从外向里传播。
然后阻止事件传播的方法仍是一样的:用e.stopPropagation();
现在我们给a加上e.stopPropagation();
<span style="font-family:Microsoft YaHei;">a.addEventListener('click',function(e){</span>
就结束了。
-----------------------------------------------------------------------------------------------------------------------------------
因为最近在学一个效果,弹出层!
1. 就是点击一个按钮
2. 弹出一个DIV弹出层 。
3. 点击DIV弹出层以外的地方,关闭这个DIV。
在第3步这里,当我们在点击DIV以外的地方的时候,body中基本都还有其它的链接等触发事件存在。我们不希望触发这些事件。这个时候就可以将body的点击事件转换为捕获的形式。然后再body e.stopPropagation();
这样就可以关闭弹出层,又不会触发其它的事件了。
-------------------------------------------------------------------------------------------------------------------------------------
关闭默认事件
在做弹出层的时候,当弹出弹层的时候,我们希望背景body不滚动。
这个时候就会用到 阻止默认事件发生的方法:e.preventDefault();
用法跟e.stopPropagation();一样的。
一时没想到好的例子。下次想到了,再补上!
阻止默认事件发生的方法:e.preventDefault();
默认事件就是就是浏览器自带的,不是我们写的方法,比如,你滑动浏览器滚动条的时候,页面会向下滚动!这是就是默认事件!
------------------------------------------------------------------------------------------------------------------------------------
先看这个事件监听的写法:obj.addEventListener(event,fn,useCapture)
obj : 触发事件对象
event:事件名
fn : 执行函数
useCapture:事件类型。 false表示:冒泡。true表示:捕获 默认情况是false
-------------------------------------------------------------------------------------------------------------------------------------
实例:
body中:
<div id="a"> <div id="b"></div> </div>
写上js:
<span style="font-family:Microsoft YaHei;font-size:14px;"> <script> window.onload=function(){ a.addEventListener('click',function(e){ alert("你点击了a"); }) ; b.addEventListener('click',function(e){ alert("你点击了b"); }) ; document.addEventListener('click',function(e){ alert("你点击了document") }) ; } </script></span>
上面的DIV结构是(按层次):document包含a,a包含b。即:document->a->b
此时我们点击最里面的b。页面会弹出 ‘你点击了b’ 然后再弹出 ‘你点击了a’ 然后还会弹出 ‘你点击了document ’
就是这是事件冒泡。
事件从最里层开始向外触发。
------------------------------------------------------------------------------------------------------------------------------------
阻止方式:e.stopPropagation();
对b事件进行修改:
<span style="font-family:Microsoft YaHei;">b.addEventListener('click',function(e){</span>
<span style="font-family:Microsoft YaHei;"> <span style="color:#ff0000;"> e.stopPropagation();</span> alert("你点击了b"); }) ;</span>此行,页面就是只弹出一个 ‘你点击b’。阻止了事件向外传播。
-------------------------------------------------------------------------------------------------------------------------------------
现在看事件捕获。
先将例子改造成事件捕获的形式:就是监听事件函数里多放个参数 true
<span style="font-family:Microsoft YaHei;"> <script>
window.onload=function(){
a.addEventListener('click',function(e){
alert("你点击了a");
},<span style="color:#ff0000;">true</span>) ;
b.addEventListener('click',function(e){
alert("你点击了b");
},<span style="color:#ff0000;">true</span>) ;
document.addEventListener('click',function(e){
alert("你点击了document")
},<span style="color:#ff0000;">true</span>) ;
}
</script></span>这个时候你再点击b 就会依次出现 ‘你点击了document ’ 然后再弹出 ‘你点击了a’最后是‘你点击了b’
即:事件从外向里传播。
然后阻止事件传播的方法仍是一样的:用e.stopPropagation();
现在我们给a加上e.stopPropagation();
<span style="font-family:Microsoft YaHei;">a.addEventListener('click',function(e){</span>
<span style="font-family:Microsoft YaHei;"><span style="font-size:14px;"> e.</span><span style="font-size:14px;">stopPropagation</span><span style="font-size:14px;">();</span> alert("你点击了a"); },<span style="color: rgb(255, 0, 0);">true</span>) ;</span>即行结果:弹出‘你点击了document ’ 然后弹出‘你点击了a’
就结束了。
-----------------------------------------------------------------------------------------------------------------------------------
因为最近在学一个效果,弹出层!
1. 就是点击一个按钮
2. 弹出一个DIV弹出层 。
3. 点击DIV弹出层以外的地方,关闭这个DIV。
在第3步这里,当我们在点击DIV以外的地方的时候,body中基本都还有其它的链接等触发事件存在。我们不希望触发这些事件。这个时候就可以将body的点击事件转换为捕获的形式。然后再body e.stopPropagation();
这样就可以关闭弹出层,又不会触发其它的事件了。
-------------------------------------------------------------------------------------------------------------------------------------
关闭默认事件
在做弹出层的时候,当弹出弹层的时候,我们希望背景body不滚动。
这个时候就会用到 阻止默认事件发生的方法:e.preventDefault();
用法跟e.stopPropagation();一样的。
一时没想到好的例子。下次想到了,再补上!
相关文章推荐
- libevent 主流程解析
- 虚拟机安装VMware Tools
- [Jmeter系列]Jmeter源码编译步骤
- lintcode-带环链表-102
- Android Studio导入第三方类库的方法
- mysql-列值连接成字符串
- 手动设置SwipeRefreshLayout的setRefreshing(true)遇到的问题
- C++的感想
- Linux内核驱动之延时 【转】
- 采用CSS3 Media Query技术适应Android平板屏幕分辨率和屏幕像素密度
- js ajax请求
- js 自己常用的小小技巧(持续更新)
- [转载] Redis集群搭建最佳实践
- centos 文本排序
- 编程题目--救火英雄
- 离散傅立叶变换的实现
- 游标
- uva 10618 Tango Tango Insurrection 动态规划
- java.lang.NoClassDefFoundError: Lorg/hibernate/cache/CacheProvider
- Oracle 实例几个function