JavaScript中preventDefault方法

JavaScript中preventDefault方法

在 JavaScript 中，preventDefault() 是事件对象（Event）的一个方法，用于阻止事件的默认行为。许多 HTML 元素有默认的行为，例如点击链接会跳转页面、提交表单会刷新页面等。通过调用 preventDefault()，可以阻止这些默认行为的发生。

使用场景

1. 阻止链接跳转：

   <a href="https://example.com" id="myLink">Click me</a>
   <script>
     document.getElementById('myLink').addEventListener('click', function(event) {
       event.preventDefault(); // 阻止链接跳转
       console.log('Link click prevented');
     });
   </script>
   

2. 阻止表单提交：

   <form id="myForm">
     <input type="text" name="username" />
     <button type="submit">Submit</button>
   </form>
   <script>
     document.getElementById('myForm').addEventListener('submit', function(event) {
       event.preventDefault(); // 阻止表单提交
       console.log('Form submission prevented');
     });
   </script>
   

3. 阻止右键菜单：

   document.addEventListener('contextmenu', function(event) {
     event.preventDefault(); // 阻止右键菜单
     console.log('Right-click menu prevented');
   });
   

4. 阻止文本选中：

   document.addEventListener('selectstart', function(event) {
     event.preventDefault(); // 阻止文本选中
     console.log('Text selection prevented');
   });
   

注意事项

1. 事件传播：

   • preventDefault() 只阻止事件的默认行为，不会阻止事件冒泡或捕获。如果需要阻止事件传播，可以使用 stopPropagation() 或 stopImmediatePropagation()。

2. 兼容性：

   • preventDefault() 在现代浏览器中广泛支持。如果需要兼容旧版浏览器（如 IE8 及以下），可以使用以下代码：

     if (event.preventDefault) {
       event.preventDefault();
     } else {
       event.returnValue = false; // 兼容 IE8 及以下
     }
     

3. 不可取消的事件：

   • 某些事件的默认行为无法取消（例如 scroll 事件）。对于这些事件，调用 preventDefault() 不会有任何效果。

与 return false 的区别

• 在 jQuery 中，return false 会同时调用 preventDefault() 和 stopPropagation()。
• 在原生 JavaScript 中，return false 不会阻止默认行为，除非在事件处理函数中显式调用 preventDefault()。

示例：阻止表单提交并验证输入

<form id="myForm">
  <input type="text" name="username" required />
  <button type="submit">Submit</button>
</form>
<script>
  document.getElementById('myForm').addEventListener('submit', function(event) {
    let input = event.target.querySelector('input[name="username"]');
    if (input.value.trim() === '') {
      event.preventDefault(); // 阻止表单提交
      alert('Username cannot be empty!');
    }
  });
</script>

总结

• preventDefault() 用于阻止事件的默认行为。
• 适用于链接跳转、表单提交、右键菜单等场景。
• 不会阻止事件传播，如果需要阻止传播，需额外调用 stopPropagation()。
• 是现代 Web 开发中处理事件的重要工具之一。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github