阻止默认事件在Firefox上不起作用

Question

我正在尝试防止 A HREF 打开链接，而是执行一个脚本。我已经让脚本部分工作了，但似乎 Firefox 会忽略这个：

$("#permalink a").click(function(id){
  $("#newPost").fadeToggle;
  event.preventDefault();
  var id = this.getAttribute('href');
  $("#newPostContent").load(id);
  $("#newPost").show("fast");
});

有人能推荐一个跨浏览器的脚本来阻止默认行为吗？

- Tomer Lichtash

Answer 1

这个问题的标准解决方案是从 click() 处理程序中返回 false。return false 相当于在事件上调用 preventDefault() 和 stopPropagation()。对于此任务, 只使用 preventDefault() 就足够了，因此它或者 return false 都可以工作。

你的问题似乎是语法错误和参数名不正确。我看到：

• fadeToggle 没有括号；
• 函数参数称为 id，但你调用了 event.preventDefault();
• 你淡入淡出了文章，然后立即显示它？这将排队两个动画，但并没有多少意义。你可能想要以合理的方式链接这两件事和 load()。

所以这应该能够解决问题：

$("#permalink a").click(function(event) {
  $("#newPost").fadeToggle();
  var id = this.getAttribute('href');
  $("#newPostContent").load(id);
  $("#newPost").show("fast");
  return false;
});

在这种情况下，您可以自由地将 return false 替换为 event.preventDefault()，但是传播的 click() 事件可能会根据您有哪些其他事件处理程序而导致其他问题。

你可以在此示例中自由地将return false替换为event.preventDefault()，但是根据您拥有的其他事件处理程序，传播的click()事件可能会引起其他问题。

- cletus

---

嘿，这边发生了什么事？ - Steerpike

这不是问题所在。问题是应该将 .click(function(id){ 改为 .click(function(event){ 。 - karim79

“但无论如何，防止链接导航最好的方法是从点击事件处理程序中返回false。” - 实际上并不是这样做 - 如果您需要正确传播事件，那么这种方式会出问题。这是一种“懒惰”的方法，需要更少的代码，但preventDefault恰好可以做到所需的事情（没有默认操作），也不会有其他影响。 - ijw

由于karim79和ijw所说的原因。感谢karim79！我有一个.click(function(){event.preventDefault();});在chrome中运行得很完美，但在firefox中失败了。将其更改为.click(function(event){event.preventDefault();});在两者中都完美运行。任何人来到这里并盲目地采纳这个建议应该阅读这篇文章：http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/ - Cassie

Answer 2

这段代码始终有效：

Firefox需要“事件处理程序”，而Chrome则不需要。因此，这在所有浏览器上都可以使用：

$('#id_obj').click(function(event) {   
     event.preventDefault(event);  
}

- evan tedeschi

---

event.preventDefault(event) 应该改为 event.preventDefault() - 无论是 jQuery 参考还是 DOM 参考都没有提到 preventDefault 方法接受参数。前者可能不相关，因为最终触发的是 DOM 事件。 - B5A7

对我来说，问题在于 event 没有传递到点击函数中，所以只需将其从 $('id_obj').click(function(){ 更改为 $('#id_obj').click(function(event){ 即可解决。将 event 传递到 preventDefault 方法中并没有改变任何东西。 - egbrad

这个可行！这节省了我很多时间。 - Perry Holden

Answer 3

            $("#permalink a").click(function(id){

应该是

            $("#permalink a").click(function(event){

var id=event.target;

this指向当前操作的对象，而event.preventDefault()可以阻止默认行为。

通常我会返回false；这样做既可以阻止默认行为，又可以停止事件的传播，但这可能会影响到其他事件处理程序。

- ijw

---

实际上，我注意到你在传递'id'，但它被属性提取覆盖了。更好的方法是，当传入'id'变量时它并不是一个id（它是一个事件对象，虽然我假设你认为它是DOM对象），而且当你获取attr时也不是一个id（此时它是一个URI）。 再加上你的fadeToggle调用缺少括号，这让我觉得在你开始指责jQuery库之前，你需要仔细阅读你写的代码。 - ijw

Answer 4

你只需要写 return false; 就可以了。

- Steerpike

---

“回到你原本的答案，等待一个品味不那么挑剔的提问者。” - Steerpike