大家想象一下冒泡的物理行为,就是向上浮动,js中的冒泡行为亦是如此,执行子元素的某个事件时,行为向上传递,父元素也执行相同的行为 (行为相同,执行函数可以不相同) 语法格式:
stopPropagation() 实例:
>
document.getElementById("btn").addEventListener("click",showBtn);
//给按钮添加点击事件
document.getElementById("div").addEventListener("click",showDiv);
//给div添加点击时间
function showBtn(event) {
alert("hello");
}
function showDiv() {
alert("word");
}
【javascript|JS 事件的冒泡行为】浏览器中将依次弹出“hello”和“word”的提示框,
>
document.getElementById("btn").addEventListener("click",showBtn);
//给按钮添加点击事件
document.getElementById("div").addEventListener("click",showDiv);
//给div添加点击时间
function showBtn(event) {
alert("hello");
event.stopPropagation();
}
function showDiv() {
alert("word");
}
此时加上了event.stopPropagation()方法,将不再执行父元素div的点击事件,只执行一次按钮的点击事件,即阻止了事件的冒泡行为。
推荐阅读
- 操作系统|[译]从内部了解现代浏览器(1)
- web网页模板|如此优秀的JS轮播图,写完老师都沉默了
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- JS/JavaScript|JS/JavaScript CRC8多项式 16进制