JS冒泡事件
参考文档
https://www.cnblogs.com/moqing/p/5590216.html
冒泡定义
举个栗子：父亲拥有点击事件，孩子也有点击事件，点击父亲时会触发父亲的点击事件，点击孩子时会先触发孩子的点击事件，同时也会再触发父亲的点击事件，这就叫冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件冒泡-父子位置重叠时</title>
<style>
* {
margin: 0;
padding: 0;
}
#box1 {
width: 400px;
height: 400px;
background-color: #f00;
margin: 50px auto;
}
#box2 {
width: 160px;
height: 160px;
background-color: #ff0;
}
</style>
</head>
<body>
<div id="box1">
<h2>我是父亲</h2>
<div id="box2">
<h2>我是儿子</h2>
</div>
</div>
</body>
<script>
// 点击父亲弹出父亲
const box1 = document.getElementById("box1");
box1.onclick = function() {
alert("我是父亲");
}
// 点击孩子，先弹出孩子信息，再弹出父亲信息
const box2 = document.getElementById("box2");
box2.onclick = function() {
alert("我是孩子");
}
</script>
</html>
冒泡要点
当父亲存在点击事件时，无论儿子位置是不是在父元素内部，只要儿子触发点击事件，就会触发父亲的点击事件，通俗讲无论孩子走到哪里，你爸爸终究是你爸爸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件冒泡-父子位置分开</title>
<style>
* {
margin: 0;
padding: 0;
}
#box1 {
width: 400px;
height: 400px;
background-color: #f00;
margin: 50px auto;
}
#box2 {
width: 160px;
height: 160px;
background-color: #ff0;
/* 孩子脱离父亲盒子 */
position: fixed;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div id="box1">
我是父亲
<div id="box2">
我是孩子
</div>
</div>
</body>
<script>
// 点击父亲弹出父亲
const box1 = document.getElementById("box1");
box1.onclick = function() {
alert("我是父亲");
}
// 当注释孩子点击事件时，点击孩子也会弹出父亲的信息，和孩子所在的位置无关
// 正常事件当点击孩子，先弹出孩子信息，再弹出父亲信息
// const box2 = document.getElementById("box2");
// box2.onclick = function() {
// alert("我是孩子");
// }
</script>
</html>
阻止冒泡
需要定义一个函数来阻止冒泡
定义函数
// 取消事件冒泡有两种方式：
// 标准的W3C 方式：event.stopPropagation();这里的stopPropagation是标准的事件对象的一个方法，调用即可
// 非标准的IE方式:window.event.cancelBubble=true;这里的cancelBubble是IE事件对象的属性，设为true
function stopBubble(event) {
// 如果提供了事件对象，则是一个非IE浏览器
if(event && event.stopPropagation) {
//因此它支持W3C的stopPropagation()方法
event.stopPropagation();
}else {
//否则，我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
}
调用函数
stopBubble(event);
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>取消事件冒泡</title>
<style>
* {
margin: 0;
padding: 0;
}
#box1 {
width: 400px;
height: 400px;
background-color: #f00;
margin: 50px auto;
}
#box2 {
width: 160px;
height: 160px;
background-color: #ff0;
/* 孩子脱离父亲盒子 */
position: fixed;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div id="box1">
parent
<div id="box2">child</div>
</div>
</body>
<script>
// 父亲添加点击事件
const box1 = document.getElementById("box1");
box1.onclick = function() {
alert("hello, parent");
};
// 儿子添加点击事件
const box2 = document.getElementById("box2");
box2.onclick = function(event) {
alert("hello, child");
// 调用函数取消冒泡
stopBubble(event);
};
// 定义函数
function stopBubble(event) {
// 如果提供了事件对象，则是一个非IE浏览器
if(event && event.stopPropagation) {
//因此它支持W3C的stopPropagation()方法
event.stopPropagation();
}else {
//否则，我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
}
</script>
</html>
VUE中取消冒泡事件
1.定义一个js文件--base.js，在里面定义阻止冒泡函数
exports.install = function(Vue, options) {
// 定义stopBubble阻止事件冒泡
Vue.prototype.stopBubble = function(event) {
// 如果有事件对象，则是一个非IE浏览器
if(event && event.stopPropagation) {
// W3C的stopPropagation()
event.stopPropagation();
}else {
// IE方法取消冒泡
window.event.cancelBubble = true;
}
}
}
2.引入main.js，然后使用base.js
import base from "assets/js/base.js";
Vue.use(base);
3.全局调用
this.stopBubble(event);
