Javascript Girl
  1. Javascript Girl
  3. JS li tag onclick ne fonctionne pas sur IE8
Intereting Posts
Meteor – Publiez seulement le compte pour une collection Déterminez quels éléments DOM la sélection de texte actuelle contient Comment puis-je empêcher un iframe d'accéder au cadre parent? Comment créer un objet "d'identification" requis par la méthode user.reauthenticate () Firebase? Exemple simple d'utilisation require.js Comment créer Google Latitude comme marqueurs? D3: Compréhension du composant de la clé Multi-Foci Force Mise en cache du navigateur dans l'application ASP.NET Que pouvons-nous faire avec ES6 Generator que nous ne pouvons pas avec for loop? Javascript – showModalDialog ne renvoie pas de valeur dans Chrome Comment obtenir de grandes images à partir de l'album photo via facebook graph api Quelle méthode serait la meilleure pour construire ce graphe complexe? Héritage JavaScript avec Object.create ()? Construire récursivement une chaîne de promesses en javascript – considérations relatives à la mémoire Comment supprimer la commande récente de la console

JS li tag onclick ne fonctionne pas sur IE8

J'utilise Below JS, mais li onclick ne fonctionne pas sur le navigateur IE8.

Jsfiddle link:

Http://jsfiddle.net/sudheera/DUZ3B/14/

HTML 

<div class="primaryNav fl"> <ul id="hd_vertical" class="productNav"> <li id="hd_test" class="flight"> <span class="navIcon flightIcon hd_test">Test</span> <a class="hd_test" href="http://validator.w3.org/">Flights</a> </li> <li id="hd_test1" class="bus"> <span class="navIcon busIcon hd_test1">Test</span> <a class="hd_test1" href="http://www.w3schools.com/">Buses</a> </li> </ul> </div>

JS 

 var changeLocation = function(id) { var _url = document.getElementsByClassName(id)[1].getAttribute('href'); location.href = _url; } document.getElementById("hd_vertical").addEventListener("click",function(e) { if(e.target.nodeName == "LI") { var _anchor = e.target.id; changeLocation(_anchor); } else if(e.target.nodeName == "SPAN") { var span = e.target; var li = span.parentNode; var _anchor = li.id; changeLocation(_anchor); } });

veuillez suggérer

    IE8 et versions antérieures n'ont pas addEventListener , mais ils ont leur prédécesseur non standard, attachEvent . Ils ne sont pas tout à fait les mêmes.

    Voici une fonction "accrocher ce événement" qui utilise ce qui est disponible: 

     var hookEvent = (function() { var div; // The function we use on standard-compliant browsers function standardHookEvent(element, eventName, handler) { element.addEventListener(eventName, handler, false); return element; } // The function we use on browsers with the previous Microsoft-specific mechanism function oldIEHookEvent(element, eventName, handler) { element.attachEvent("on" + eventName, function(e) { e = e || window.event; e.preventDefault = oldIEPreventDefault; e.stopPropagation = oldIEStopPropagation; handler.call(element, e); }); return element; } // Polyfill for preventDefault on old IE function oldIEPreventDefault() { this.returnValue = false; } // Polyfill for stopPropagation on old IE function oldIEStopPropagation() { this.cancelBubble = true; } // Return the appropriate function; we don't rely on document.body // here just in case someone wants to use this within the head div = document.createElement('div'); if (div.addEventListener) { div = undefined; return standardHookEvent; } if (div.attachEvent) { div = undefined; return oldIEHookEvent; } throw "Neither modern event mechanism (addEventListener nor attachEvent) is supported by this browser."; })();

    Ensuite, vous l'utiliseriez comme dans votre exemple: 

     hookEvent(document.getElementById("hd_vertical"), "click", function(e) { // ... });

    Notez comment il fournit les fonctions preventDefault et stopPropagation manquantes sur l'objet événement sur les navigateurs à l'aide de attachEvent et assure que this dans l'appel du gestionnaire est ce qu'il serait si vous utilisez addEventListener .

    Il existe différents aspects de la normalisation des événements que ce qui précède ne fait pas :

    1. Il ne garantit pas l'ordre dans lequel les gestionnaires fonctionnent ( attachEvent fait dans l'ordre inverse pour addEventListener )

    2. Il ne gère pas les problèmes autour de e.which vs. e.keyCode et tellement

    … et bien sûr, je n'ai pas fourni de fonction d'événement de détachement . 🙂 Pour des choses comme ça, regardez l'utilisation d'une bibliothèque comme jQuery , YUI , Closure ou l' une de plusieurs autres .

    Note latérale: Comme l' a indiqué adeneo dans un commentaire sur la question, IE8 ne prend pas en charge getElementsByClassName . Mais il prend en charge querySelectorAll et querySelector , alors changez: 

     var _url = document.getElementsByClassName(id)[1].getAttribute('href');

    à 

     var _url = document.querySelectorAll("." + id)[1].getAttribute('href');

    Notez que cela tentera d'obtenir le deuxième élément correspondant au sélecteur. [1] est la deuxième entrée dans la liste, pas la première, qui serait [0] . Si vous vouliez dire le premier, vous pouvez utiliser querySelector , qui renvoie uniquement le premier match: 

     var _url = document.querySelector("." + id).getAttribute('href');