JavaScript-------使用 stopPropagation() 修复问题

最新推荐文章于 2024-04-11 10:37:58 发布

程序员的客栈

最新推荐文章于 2024-04-11 10:37:58 发布

阅读量360

点赞数 8

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/cmHuney/article/details/135961023

版权

件冒泡有时会产生问题，但有一种方法可以防止这些问题。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()，这将阻止该事件向盒子内传递。

程序员的客栈

关注

8
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-------使用 stopPropagation() 修复问题

件冒泡有时会产生问题，但有一种方法可以防止这些问题。Event对象有一个可用的函数，叫做 stopPropagation()，当在一个事件处理器中调用时，可以防止事件向任何其他元素传递。事件的处理器中对事件对象调用。这将阻止该事件向盒子内传递。点击视频，进行播放。
复制链接

扫一扫