【前端每日基础】day10——默认事件

modaoshi51991

于 2024-05-18 09:25:19 发布

阅读量355

点赞数 7

分类专栏：前端每日基础文章标签：前端

本文链接：https://blog.csdn.net/modaoshi51991/article/details/139012991

版权

前端每日基础专栏收录该内容

45 篇文章 1 订阅

订阅专栏

阻止默认事件

默认事件是指浏览器在某些用户交互后会自动执行的操作。例如，点击链接会导航到新的页面，提交表单会刷新页面。

使用 preventDefault()
preventDefault() 方法可以阻止浏览器执行默认行为。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Stop Propagation and Prevent Default</title>
</head>
<body>
  <div id="parent" style="padding: 50px; background-color: lightblue;">
    Parent
    <a href="https://www.example.com" id="link" style="display: block; margin-top: 20px;">
      Go to Example.com
    </a>
  </div>

  <script>
    const parent = document.getElementById('parent');
    const link = document.getElementById('link');

    parent.addEventListener('click', () => {
      alert('Parent clicked');
    });

    link.addEventListener('click', (event) => {
      event.preventDefault(); // 阻止链接的默认跳转行为
      event.stopPropagation(); // 阻止事件冒泡
      alert('Link click prevented and event propagation stopped');
    });
  </script>
</body>
</html>