jQuery - 如何在JavaScript函数中使用e.preventDefault();

Question

我有这个JavaScript函数：

function putVote(trackid, vote) {
}

我通过以下方式调用此函数：

<a href="#" onClick="putVote('data1', 'data2')">Link</a>

我想在putVote()上使用e.preventDefault();，但我觉得我的做法有误。我该如何做呢？

谢谢！

- markzzz

---

你没有告诉我们为什么你想使用这个函数...但我可以说，你最好使用jQuery来绑定事件处理程序，而不是将其硬编码到属性中。 - Pointy

你可以将事件传递给 putVote，然后在那里调用 preventDefault()。 - pimvdb

Answer 1

最简单的方法是在处理程序中使用return false（如果处理程序有return putVote('data1', 'data2)，则return false只会在putVote中起作用）。

但正如Pointy所说，更好的技术是从JavaScript中附加事件处理程序，最简单的方法是使用jQuery或Prototype等库/框架。

- Skilldrick

---

是的，我知道，但我想使用preventDefault :) - markzzz

为什么不呢！ :) 好的，我会使用 return false。 - markzzz

e.preventDefault(); 阻止事件的默认操作（如跟随链接），但不会停止事件从DOM中冒泡。返回 false 则两者都会阻止。 - josh3736

@josh3736 - 这是我最初的想法，但是这个fiddle证明了我的想法不正确（除非我漏看了什么）。 - Skilldrick

@Skilldrick：我做了一个错误的假设。从一个jQuery绑定的处理程序返回false确实会停止传播（以及取消默认操作），因为jQuery调用event.stopPropagation()如果处理程序函数返回false。然而，内联事件处理程序早在事件冒泡的概念出现之前就已经存在，所以返回false只能防止默认操作。当然，无论如何都不应该使用内联事件处理程序... - josh3736

@josh3736 哈哈，我之前在 Twitter 上链接了同一行 :) 是的，我认为我们都同意内联事件处理程序很糟糕。有用的 Quirksmode 链接，谢谢。 - Skilldrick

Answer 2

最简单的方法：

<a href="#" onClick="putVote('data1', 'data2'); return false;">Link</a>

- Chris Van Opstal

---

一个老的答案，但正是我所需要的。谢谢！ - Yuschick

Answer 3

如果您正在使用 jQuery。

JS：

$("#link").click(function(evt) {
    evt.preventDefault();
    putVote('data1', 'data2');
});

HTML:

<a href="#" id="link">Link</a>

如果您正在使用最新版本的jQuery和HTML5文档类型。

JS：

$("#link").click(function(evt) {
    evt.preventDefault();
    var $self = $(this);
    putVote($self.data("one"), $self.data("two"));
});

HTML：

<a href="#" id="link" data-one="data1" data-two="data2">Link</a>

- kim3er

Answer 4

在您的情况下，使用jQuery样式绑定的技巧是您希望能够将特定于元素的参数传递给处理程序（“data1”，“data2”）。现代的做法是这样的：

<a href="#" class='data-clickable' data-click-params='["data1", "data2"]'>Link</a>

然后，在“ready”处理程序（或其他适当的位置），您将绑定您的处理程序：

$('a.data-clickable').click(function(e) {
  var elementData = $(this).data('click-params');
  //
  // ... handle the click ...
  //
  e.preventDefault();
});

在这种情况下，"elementData"变量最终将成为一个包含两个值"data1"和"data2"的数组。您可以给"data-foo"属性赋予JSON表示的值，并且当您使用jQuery的".data()"方法获取属性时，它会自动解码JSON。

- Pointy