Question

我是一个javascript noob，如果这个问题不适合这个论坛，请道歉。我想了解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();
  });

Answer 1

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

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

希望这有帮助！

Answer 2

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

E.g。点击链接将跟随元素的href。 e.preventDefault();将阻止关注链接，您将不会被重定向。

更多信息here

$(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>

Answer 3

首先，在定义函数中发生的所有事情时，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>上方触发事件，则需要将文档记录到顶部并在网址中显示#然后触发您的功能，但如果您使用preventDefault则其将阻止链接的默认功能。

Javascript - jQuery preventDefault方法

3 个答案: