event.preventDefault()在Chrome中工作，但在Firefox / IE中不起作用

event.preventDefault() working in Chrome, but not in Firefox / IE

本文关键字：Firefox 但在 IE 不起作用 工作 Chrome event preventDefault      更新时间：2023-09-26

我知道已经有很多关于这个主题的问题，但是我已经读了很多，仍然不能让我的脚本工作…

我有一个非常基本的幻灯片，可以在这里看到: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上，当脚本仍然工作时，它会重新加载页面。请问我该如何解决这个问题?:/

谢谢

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

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);
});

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

更改链接如下:

onclick="nextSlide(event);"

然后，修改函数如下:

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

运行时需要将事件传递给函数。

您通常在执行其他操作之前运行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);   
    })
})
相关文章：