[郑州|结业弟子]JS-王敏宇|2021年03月26日的日报-技能树.IT修真院

发表于： 2021-03-26 19:44:59

1 1795

今天完成的事情：修改了任务四的部分代码

明天计划的事情：修改完成任务四

收获：如何阻止事件冒泡和默认事件？

什么是事件冒泡和默认事件（行为）？

在一个对象上触发某类事件（比如点击事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

比如现在有三个div盒子层层嵌套，需要点击不同的div盒子时执行各自的点击事件。

var lg = document.getElementById("lg");
var md = document.getElementById("md");
var sm = document.getElementById("sm");
lg.onclick = function() {
alert("我是最外层的盒子lg");
};
md.onclick = function() {
alert("我是中间的盒子md");
};
sm.onclick = function() {
alert("我是最里面的盒子sm");
};

当点击最里面的盒子sm的时候，浏览器会依次弹出"我是最里面的盒子sm"，"我是中间的盒子md"，"我是最外层的盒子lg"。并不是期望的那样点击当前的盒子只执行当前盒子的点击事件。这正是因为事件冒泡的原因而导致的结果，这个时候我们就需要阻止事件冒泡。

如何阻止事件冒泡？

方法一：

使用stopPropagation()方法，使用event对象调用即可

var lg = document.getElementById("lg");
var md = document.getElementById("md");
var sm = document.getElementById("sm");
lg.onclick = function() {
alert("我是最外层的盒子lg");
};
md.onclick = function() {
alert("我是中间的盒子md");
event.stopPropagation();
};
sm.onclick = function() {
alert("我是最里面的盒子sm");
event.stopPropagation();
};

方法二：

JQ提供两种方法，第一种是stopPropagation()，使用时直接用event调用即可。

第二种是return false，代码如下：

$("#sm").click(function() {
    alert("我是最里面的盒子sm"); 
    return false;  
});

返回列表

【任务4】 [郑州|结业弟子]JS-王敏宇 | 2021年03月26日 的日报 中品

评论

分享到

【任务4】 [郑州|结业弟子]JS-王敏宇 | 2021年03月26日的日报中品