阻止事件冒泡、捕获的方法: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:
上面的DIV结构是(按层次):document包含a,a包含b。即:document->a->b
此时我们点击最里面的b。页面会弹出 ‘你点击了b’ 然后再弹出 ‘你点击了a’ 然后还会弹出 ‘你点击了document ’
就是这是事件冒泡。
事件从最里层开始向外触发。
------------------------------------------------------------------------------------------------------------------------------------
阻止方式:e.stopPropagation();
对b事件进行修改:
b.addEventListener('click',function(e){
e.stopPropagation();
alert("你点击了b");
}) ;
此行,页面就是只弹出一个 ‘你点击b’。阻止了事件向外传播。
-------------------------------------------------------------------------------------------------------------------------------------
现在看事件捕获。
先将例子改造成事件捕获的形式:就是监听事件函数里多放个参数 true
这个时候你再点击b 就会依次出现 ‘你点击了document ’ 然后再弹出 ‘你点击了a’最后是‘你点击了b’
即:事件从外向里传播。
然后阻止事件传播的方法仍是一样的:用e.stopPropagation();
现在我们给a加上e.stopPropagation();
a.addEventListener('click',function(e){
e.stopPropagation();
alert("你点击了a");
},true) ;
即行结果:弹出
‘你点击了document ’ 然后弹出‘你点击了a’ 就结束了。
-----------------------------------------------------------------------------------------------------------------------------------
因为最近在学一个效果,弹出层!
1. 就是点击一个按钮
2. 弹出一个DIV弹出层 。
3. 点击DIV弹出层以外的地方,关闭这个DIV。
在第3步这里,当我们在点击DIV以外的地方的时候,body中基本都还有其它的链接等触发事件存在。我们不希望触发这些事件。这个时候就可以将body的点击事件转换为捕获的形式。然后再body e.stopPropagation(); 这样就可以关闭弹出层,又不会触发其它的事件了。
-------------------------------------------------------------------------------------------------------------------------------------
关闭默认事件
在做弹出层的时候,当弹出弹层的时候,我们希望背景body不滚动。
这个时候就会用到 阻止默认事件发生的方法:e.preventDefault();
用法跟e.stopPropagation();一样的。
一时没想到好的例子。下次想到了,再补上!