2010-04-15 3 views
16

La fonction suivante obtient l'élément cible dans un menu déroulant:Accès event.target dans IE8 unobstrusive Javascript

function getTarget(evt){ 

var targetElement = null; 

//if it is a standard browser 
if (typeof evt.target != 'undefined'){ 
    targetElement = evt.target; 
} 
//otherwise it is IE then adapt syntax 
else{ 
    targetElement = evt.srcElement; 
} 

//return id of <li> element when hovering over <li> or <a> 
if (targetElement.nodeName.toLowerCase() == 'li'){ 
    return targetElement; 
} 
else if (targetElement.parentNode.nodeName.toLowerCase() == 'li'){ 

    return targetElement.parentNode; 
} 
else{ 
    return targetElement; 
} 

Inutile de dire que cela fonctionne dans Firefox, Chrome, Safari et Opera, mais il ne fonctionne pas dans IE8 (et je suppose que dans les versions précédentes aussi bien). Lorsque je tente de le déboguer avec IE8 je reçois l'erreur « Membre introuvable » sur la ligne:

targetElement = evt.srcElement; 

ainsi que d'autres erreurs ultérieures, mais je pense que c'est la ligne clé. Toute aide sera appréciée.


Désolé, le formatage n'est pas correct.

est la fonction Ici encore

function getTarget(evt){ 

var targetElement = null; 

//if it is a standard browser get target 
if (typeof evt.target != 'undefined'){ 
    targetElement = evt.target; 
} 
//otherwise it is IE then adapt syntax and get target 
else{ 
    targetElement = evt.srcElement; 
} 

//return id of <li> element when hovering over <li> or <a> 
if (targetElement.nodeName.toLowerCase() == 'li'){ 
    return targetElement; 
} 
else if (targetElement.parentNode.nodeName.toLowerCase() == 'li'){ 

      return targetElement.parentNode; 
} 
else{ 
    return targetElement; 
} 

} // fin getTarget

+4

Vous devez utiliser jQuery. – SLaks

+1

Oui, ce serait le moyen facile;) – Mirko

Répondre

2

Dans mon expérience, le problème que vous décrivez n'est pas lié à l'endroit où l'événement est obtenu (fenêtre ou paramètre de gestionnaire), mais plutôt en raison de si oui ou non l'événement a été soulevé "correctement". Par exemple, si vous avez un élément d'entrée de texte et que vous appelez sa méthode onchange sans passer dans un objet événement, la propriété event.srcElement sera null.

Le code suivant de Jehiah est utile

function fireEvent(element,event){ 
    if (document.createEventObject){ 
     // dispatch for IE 
     var evt = document.createEventObject(); 
     return element.fireEvent('on'+event,evt) 
    } 
    else{ 
     // dispatch for firefox + others 
     var evt = document.createEvent("HTMLEvents"); 
     evt.initEvent(event, true, true); // event type,bubbling,cancelable 
     return !element.dispatchEvent(evt); 
    } 
} 

Exemple d'appel:

fireEvent(element,'change'); 
32

Le problème est que dans IE, l'objet événement est pas envoyé comme argument du gestionnaire, il est juste un mondial propriété (window.event):

function getTarget(evt){ 
evt = evt || window.event; // get window.event if argument is falsy (in IE) 

// get srcElement if target is falsy (IE) 
var targetElement = evt.target || evt.srcElement; 

//return id of <li> element when hovering over <li> or <a> 
if (targetElement.nodeName.toLowerCase() == 'li'){ 
    return targetElement; 
} 
else if (targetElement.parentNode.nodeName.toLowerCase() == 'li'){ 

    return targetElement.parentNode; 
} 
else{ 
    return targetElement; 
} 
+0

Je le fais effectivement evt = evt || window.event; avant d'appeler la fonction, puis j'évaluer evt à la fonction getTarget ... – Mirko

0

j'ai rencontré ce problème aussi. Et le problème est: dans IE8, l'événement doit être window.event, pas l'événement déclaré dans params.

Je fixe comme ci-dessous:

function onclick(event){ 
     if (is_ie8()){ 
     clicked_element = window.event.srcElement 
     } else { 
     clicked_element = event.target 
     } 
    } 
1

Version Shortest jamais vu:

function getTarget(e) { 
var evn = e || window.event; 
return evn.srcElement || e.target; 
}