<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>study</title>
</head>
<body>
<div id="out">
<div id="center">
<div id="in"></div>
</div>
</div>
<style>
#out {
width: 300px;
height: 300px;
background: red;
}
#center {
width: 200px;
height: 200px;
background: yellow;
}
#in {
width: 100px;
height: 100px;
background: green;
}
</style>
<script>
/**
* 一、dom事件流的三个阶段
* - 捕获阶段（传播方向：out center in）
* - 目标阶段（center）
* - 冒泡阶段（传播方向：in center out）
* 二、addEventListener第三个参数
* - false（默认）：事件在冒泡阶段触发
* - true：事件在捕获阶段触发
* 三、测试用例（右键点击in元素）
* - true true true: out center in
* - false true true: center in out
* - false false true: in center out
* - false false false: in center out
* - true false true: out in center
* - true false false: out in center
* - true true false: out center in
*/
function myOut(ev) {
console.log("out事件函数执行");
ev.preventDefault();//阻止默认事件
}
document.getElementById("out").addEventListener("contextmenu", myOut, true);
function myCenter(ev) {
console.log("center事件函数执行");
// ev.stopPropagation();//阻止事件流传播
ev.preventDefault();//阻止默认事件
}
document.getElementById("center").addEventListener("contextmenu", myCenter, true);
function myIn(ev) {
console.log("in事件函数执行");
ev.preventDefault();//阻止默认事件
}
document.getElementById("in").addEventListener("contextmenu", myIn, true);
</script>
</body>
</html>
浙公网安备 33010602011771号