阻止默认行为

生活不易，被迫卖艺

于 2024-08-14 16:54:30 发布

阅读量152

点赞数 3

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_50018442/article/details/141195062

版权

阻止元素发生默认行为

例如：

当点击提交按钮时阻止对表单的提交。
阻止链接的跳转。

语法：

事件对象.preventDefault()


<body>
  <form action="">
    姓名: <input type="text" name="username">
    <button>提交</button>
  </form>
  <a href="http://www.baidu.com">点击跳转</a>
  <script>
    // 阻止默认行为
    const form = document.querySelector('form')
    const input = document.querySelector('[name=username]')
    form.addEventListener('submit', function (e) {
      // 如果input表单的值为空则不允许提交
      if (input.value === '') {
        // return 无法阻止提交事件
        e.preventDefault()  // 阻止提交事件
      }
    })

    document.querySelector('a').addEventListener('click', function (e) {
      e.preventDefault()
    })
  </script>
</body>