de l'événement.preventDefault() de travail dans Chrome, mais pas dans Firefox / IE

Je sais qu'il y a déjà beaucoup de questions sur ce sujet, mais j'ai lu beaucoup d'entre eux et encore ne pouvais pas obtenir mon script fonctionne ...

J'ai un très de base diaporama qui peut être vu ici : www.screations.net/wm (il y a 3 diaporamas, j'ai le même problème sur tous les 3 d'entre eux)

Voici le code que j'utilise pour la navigation : 

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

Et le jQuery (simplifié) : 

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

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

Maintenant cela fonctionne très bien sur Chrome, mais sur Firefox /IE, tandis que le script fonctionne toujours, il recharge la page. Comment puis-je résoudre ce problème s'il vous plaît ? :/

Merci

  • Vous ne pouvez pas attendre de event.preventDefault() de travail si vous ne passez pas le cas dans la fonction...
  • ...et si vous ne vous attendez pas à un event paramètre à vos fonctions.
  • Si vous utilisez jQuery, pourquoi ne pas l'utiliser pour attacher les gestionnaires d'événements correctement (au lieu de inline attributs)?
  • Le vrai mystère ici, c'est pourquoi ce code fonctionne dans Chrome, il ne devrait pas. Il a probablement à voir avec vous attacher les gestionnaires d'événements pour img des balises qui n'ont pas de valeurs par défaut. event n'est pas global, il doit être passé dans le gestionnaire comme un paramètre. function nextSlide(event) { /* now event actually exists! */ }. Comme d'autres l'ont mentionné l'aide onclick est une mauvaise pratique, donner un id à la a tag et utiliser jQuery pour joindre l'événement: <a id="next">, jQuery('#next').click(nextSlide);.
InformationsquelleAutor Kanjiro | 2014-05-04
  1. 8

    En voyant le corps de la fonction, il y buble deux problèmes évidents

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

    Vous n'avez pas passer event, donc lors de l'appel de cette fonction, JS suppose que event vient de portée mondiale. Deuxièmement, vous feriez habituellement voulez empêcher l'action par défaut avant de commencer à faire quelque chose, comme ceci:

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

    Et enfin, il ne fait pas trop de sens d'utiliser le JavaScript en ligne lorsque vous avez déjà inclus jquery.

    Donc, j'avais à réécrire votre chose comme:

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

});


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

});
    InformationsquelleAutor Yang
  2. 1

    Vous ne pouvez pas attendre de l'événement afin d'être prévenus si vous n'avez pas le passer à la fonction.

    Changer vos liens comme suit:

    onclick="nextSlide(event);"

    Ensuite, modifiez votre fonction comme suit:

    function nextSlide(event){ //<-- Accept the event parameter here...
    //Move this first in the function....
    event.preventDefault();
    $('.slide').eq(0).fadeIn(fadeSpeed);
}
    • Non, onclick="nextSlide(e);" n' pas de travail.
    • bonne prise. J'étais confus de script en ligne avec d'autres applications.
    • Peine. Seul le event identifiant devrait être disponible pour l'objet d'événement dans inline attribut code du gestionnaire. Vous pouvez utiliser function nextSlide(e) { e.preventDefault(); … } de cours.
    InformationsquelleAutor cale_b
  3. 0

    Vous exécutez et vous avez besoin de passer l'événement dans la fonction.

    Vous exécutez généralement de l'événement.preventDefault() avant de faire d'autres trucs, mais c'est pas 100% nécessaire. 

    $(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);   
    })
})
    • Pas de. event.preventDefault juste besoin d'être appelé au sein de l'un des maîtres-chiens.
    • Ok, vous avez raison, il n'est pas 100% nécessaire. Mais vous ne le faire pour des raisons de lisibilité. Édité ma réponse.
    • Il est à l'aide de classes, pas d'id. Un sélecteur doit être img.slideNext pas #slideNext
    InformationsquelleAutor Johnston