JS阻止冒泡
2017-09-27 16:03
120 查看
js阻止冒泡冒泡,顾名思义,就像是水里的泡泡慢慢向上浮动,并且是慢慢的变大。这和我们遇到的事件时一样的,再说直白一点就是儿子知道一件事,他会自动去告诉爸爸,爸爸又会去告诉爷爷,而这个自动就是系统默认的,所有我们就是要阻止系统的这一特点。在冒泡的事件中,一般是使用嵌套的比较多,或者当我们给某一个或者多个标签绑定事件时会引起另一个事件的相应,但是我们不想让别的事件来响应,所以这个时候就需要组织冒泡了。我们就用一个简单的案例来说明:(1)这是div嵌套div在嵌套一个a标签
<div id="div1" class="div1">最外层 <div id="div2" class="div2">中间层层 <a id="a1" href="***">最里层</a> </div> </div>(2)js内容,给每div个a标签设置点击事件
<script> var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); var a1 = document.getElementById("a1"); div1.addEventListener("click", function (event) { alert("最外层"); }); div2.addEventListener("click", function (event) { alert("中间层"); }); a1.addEventListener("click", function (event) { alert("最里层"); event.stopPropagation(); }); </script>运行的结果证明,当我们不设置阻止冒泡的时候,点击最里层,alert弹出的顺序是 最里层→中间层→最外层,然后会跳转到a标签的链接地址。那么这里我们就开始设置阻止冒泡(1)event.stopPropagation()
a1.addEventListener("click", function (event) { alert("最里层"); event.stopPropagation(); });给a标签设置event.stopPropagation(),点击结果是,弹出 最里层并且跳转地址,中间层和最外层则不会弹出。(2)event.preventDefault()
a1.addEventListener("click", function (event) { alert("最里层"); event.preventDefault(); });给a标签设置event.preventDefault(),点击结果是,弹出 最里层→中间层→最外层,但不会跳转页面。
那么说,stopPropagation阻止了冒泡事件,但是没有阻止默认事件,也就是说可以跳转,
preventDefault,没有阻止事件的冒泡,但是阻止了默认的事件,就是不可以跳转页面。
相关文章推荐
- JS阻止事件冒泡的3种方法之间的不同
- js阻止事件冒泡的方法
- JS阻止事件冒泡
- js阻止冒泡事件及默认操作
- js /jquery停止事件冒泡和阻止浏览器默认事件
- js阻止事件冒泡
- JS冒泡与阻止
- js 阻止事件冒泡
- js区分鼠标单双击 阻止事件冒泡
- js阻止事件冒泡的方法:
- js冒泡事件的特例toggle无法实现阻止冒泡——slideDown()和slideUp()
- JS 阻止事件冒泡
- js核心基础之Events事件机制(事件冒泡、事件捕获、事件执行顺序、阻止冒泡)
- js 阻止事件冒泡 支持所有主流浏览器
- js冒泡、捕获事件及阻止冒泡方法详细总结
- js 阻止冒泡事件
- JS事件冒泡(阻止)
- 阻止js事件冒泡
- JS阻止事件冒泡
- JS阻止冒泡事件以及默认事件发生的简单方法