event.preventDefault() 在 Chrome 中有效，但在 Firefox / IE 中无效答案

【问题标题】：event.preventDefault() working in Chrome, but not in Firefox / IEevent.preventDefault() 在 Chrome 中有效，但在 Firefox / IE 中无效
【发布时间】：2014-05-04 17:39:41
【问题描述】：

我知道已经有很多关于这个主题的问题，但我已经阅读了很多，但仍然无法让我的脚本工作......

我有一个非常基本的幻灯片，可以在这里看到：www.screations.net/wm（有 3 个幻灯片，我对所有 3 个都有同样的问题）

这是我用于导航的代码：

<a href="#"><img src="images/arrow_right.png" class="nextSlide" onclick="nextSlide();"/></a>
<a href="#"><img src="images/arrow_left.png" class="prevSlide" onclick="prevSlide();"/></a>

还有 jQuery（简化版）：

function nextSlide()
{
    $('.slide').eq(0).fadeIn(fadeSpeed);
    event.preventDefault();
}

function prevSlide()
{
    $('.slide').eq(0).fadeOut(fadeSpeed);
    event.preventDefault();
}

现在这在 Chrome 上运行良好，但在 Firefox / IE 上，虽然脚本仍然有效，但它会重新加载页面。请问我该如何解决？：/

谢谢

【问题讨论】：

如果你不将事件传递给函数，你就不能指望event.preventDefault() 工作......
...如果您不希望函数使用 event 参数。
如果您使用的是 jQuery，为什么不使用它来正确附加事件处理程序（而不是内联属性）？
这里真正的谜团是为什么该代码可以在 Chrome 中运行，但它不应该。这可能与您将事件处理程序附加到没有默认值的 img 标记有关。 event 不是全局的，它应该作为参数传递给处理程序。 function nextSlide(event) { /* now event actually exists! */ }。正如其他人提到的那样，使用onclick 是一种不好的做法，给a 标签提供一个ID 并使用jQuery 附加事件：<a id="next">、jQuery('#next').click(nextSlide);。

标签： javascript jquery firefox preventdefault

【解决方案1】：

看函数体，有两个明显的问题

function nextSlide(){
 $('.slide').eq(0).fadeIn(fadeSpeed);
 event.preventDefault();
}

您没有传递event，因此在调用此函数时，JS 假定event 来自全局范围。其次，您通常希望在开始执行任何操作之前阻止默认操作，如下所示：

function nextSlide(event) {
 event.preventDefault(); // <- That should come first
 $('.slide').eq(0).fadeIn(fadeSpeed);
}

最后，当您已经包含 jquery 时，使用内联 JavaScript 并没有太大意义。

所以，我会把你的东西改写为：

$("img.nextSlide").click(function(event){
   event.preventDefault();
   $('.slide').eq(0).fadeIn(fadeSpeed);

});


$("img.prevSlide").click(function(event){
   event.preventDefault();
   $('.slide').eq(0).fadeOut(fadeSpeed);

});

【讨论】：

【解决方案2】：

如果不将事件传递给函数，就不能指望它被阻止。

如下更改您的链接：

onclick="nextSlide(event);"

然后，改变你的功能如下：

function nextSlide(event){ // <-- Accept the event parameter here...
    // Move this first in the function....
    event.preventDefault();
    $('.slide').eq(0).fadeIn(fadeSpeed);
}

【讨论】：

@Bergi - 很好。我将内联脚本与其他应用程序混淆了。
几乎没有。只有 event 标识符可用于内联属性处理程序代码中的事件对象。你当然可以使用function nextSlide(e) { e.preventDefault(); … }。

【解决方案3】：

您运行并且需要将事件传递给函数。

您通常会在执行其他操作之前运行 event.preventDefault()，但这并不是 100% 必要的。

$(function(){
    $("img.nextSlide").on("click",function(e){
        e.preventDefault();
        $('.slide').eq(0).fadeIn(fadeSpeed);
    })

    $("img.prevSlide").on("click",function(e){
        e.preventDefault();
        $('.slide').eq(0).fadeOut(fadeSpeed);   
    })
})

【讨论】：

没有。 event.preventDefault 只需要在其中一个处理程序中调用即可。
@Bergi 好吧，你是对的，这不是 100% 必要的。但是您通常这样做是为了便于阅读。编辑了我的答案。
他使用的是类，而不是 id。选择器应该是 img.slideNext 而不是 #slideNext