件冒泡有时会产生问题,但有一种方法可以防止这些问题。Event对象有一个可用的函数,叫做 stopPropagation(),当在一个事件处理器中调用时,可以防止事件向任何其他元素传递。
在HTML文件中:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100%;
height: 100%;
background-color: #eee;
}
.hidden {
display: none;
}
div video {
padding: 40px;
display: block;
width: 300px;
height: 300px;
margin: 40px auto;
}
</style>
</head>
<body>
<button>显示视频</button>
<div class="hidden">
<video>
<source
src="video/1.mp4"
type="video/mp4" />
<p>
你的浏览器不支持 HTML 视频,这里有视频的<a href="1.webm"
>替代链接</a
>。
</p>
</video>
</div>
<script src="scripts/main1.js" defer></script>
</body>
</html>
在JS文件中:
const btn = document.querySelector("button");
const box = document.querySelector("div");
const video = document.querySelector("video");
btn.addEventListener("click", () => box.classList.remove("hidden"));
video.addEventListener("click", (event) => {
event.stopPropagation();
video.play();
});
box.addEventListener("click", () => box.classList.add("hidden"));
结果展示:
点击按钮,出现视频:
点击视频,进行播放。
在 <video>
元素的 'click'
事件的处理器中对事件对象调用 stopPropagation(),
这将阻止该事件向盒子内传递。