Javascript - jQuery preventDefault method

Javascript - jQuery preventDefault method

本文关键字：method preventDefault jQuery Javascript      更新时间：2023-09-26

我是一个javascript菜鸟，所以如果这个问题不是针对这个论坛的，我们很抱歉。我正在尝试理解jQuery方法：

e.preventDefault（）

在下面的代码中，当将项目从一个列表移动到另一个列表时，我们需要能够移动项目。我想知道那里到底发生了什么，我们阻止了什么默认操作发生？

 $('#move').click(
  function(e) {
    $('#list1 > option:selected').appendTo('#list2');
    e.preventDefault();
  });
$('#moveAll').click(
function(e) {
  $('#list1 > option').appendTo('#list2');
  e.preventDefault();
});
$('#removeAll').click(
  function(e) {
    $('#list2 > option').appendTo('#list1');
    e.preventDefault();
  });

基本上，当您单击超链接时，它会回发回URL或#当我们添加e.preventDefault()函数时，jQuery将阻止点击事件的默认操作。

因此，当您单击 #move 时，页面将不会刷新，但将执行函数中的操作。

希望这有帮助！

它将阻止当前事件的进一步默认操作。

例如，单击链接将遵循元素href。 e.preventDefault();将阻止以下链接，并且您不会被重定向。

更多信息在这里

$(document).ready(function() {
  $('#a1').click(function(e) {
    e.preventDefault();
    alert('Clicked, but not following link.');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://google.com" id="a1">Link with preventDefault</a>
<br/>
<a href="http://google.com" id="a2">Link without preventDefault</a>

首先，在定义函数中所有事情将发生什么时，e.preventDefault()应该是第一行。 

 $('#move').click(
  function(e) {
    e.preventDefault();
    $('#list1 > option:selected').appendTo('#list2');
  });
$('#moveAll').click(
function(e) {
  e.preventDefault();
  $('#list1 > option').appendTo('#list2');
});
$('#removeAll').click(
  function(e) {
    e.preventDefault();
    $('#list2 > option').appendTo('#list1');
  });

其次，preventDefault阻止了应用它的元素的默认功能。

例如：

<a href="#" class="clickBtn">

如果您在上面触发事件<a>默认情况下，它将需要文档到顶部，并在 url 中显示#，然后触发您的功能，但如果您使用preventDefault则其默认链接功能将被阻止。

相关文章：