Evénement Internet Explorer et JavaScript currentTarget
Est-il possible de prendre la cible actuelle d'un événement avec IE 7 ou 8?
Avec un autre navigateur (firefox, opera, chrome, etc.), nous pouvons utiliser event.currentTarget ou utiliser le mot clé this pour faire référence à Faire référence à l'objet qui traite l'événement.
Mais dans Internet Explorer nous n'avons pas la propriété currentTarget et la variable this fait référence à l'objet window!
Alors, comment puis-je faire ça?
Vous pouvez faire quelque chose comme
target = (event.currentTarget) ? event.currentTarget : event.srcElement;
Bien que, comme @Marc l’ait mentionné, vous pouvez utiliser un framework JQuery qui normalise l’événement pour vous.
J'ai eu le même problème. Je l'ai résolu en utilisant le mot clé this comme indiqué dans un article sur brainjar.com
Pour obtenir l'équivalent de la propriété currentTarget dans IE, utilisez le fichier ce mot clé en tant qu'argument lors de la définition du gestionnaire d'événements dans une balise.
...
function myHandler (event, link) {...}
Sur la même page, vous pouvez trouver le tableau suivant:
La réponse courte est: utilisez jQuery.
Bien que event.currentTarget ne soit pas accessible sur IE, jQuery normalisera l'événement pour vous afin que votre code fonctionne également sur IE (comme indiqué ici )
Notez que l'utilisation de event.srcElement, comme suggéré dans d'autres réponses, est pas équivalente, puisque srcElement correspond à target et non à currentTarget, comme expliqué à la fin de cette page .
avec cette fonction, vous pouvez transmettre l'objet lors de l'ajout et l'obtenir dans le programme d'écoute . le problème à ce sujet est que vous avez une fonction anonyme en tant que eventlistener et que dans ActionScript vous ne pouvez pas supprimer un programme d'écoute anonyme. ne sais pas js.
addEvent:function(object,type,listener,param)
{
if(object.addEventListener)
object.addEventListener(type, function(e){ listener(object, e, param);}, false );
else
if(object.attachEvent)
object.attachEvent('on'+type, function(e){ e = getEvent(e); listener(object, e, param);});
},
getEvent:function(e)
{
if(!e) e = window.event; // || event
if(e.srcElement) e.target = e.srcElement;
return e;
},
removeEvent:function(object,type,listener)
{
if(object.removeEventListener)
object.removeEventListener(type, listener, false);
else
object.detachEvent('on'+type, listener);
}
var div = document.getElementById('noobsafediv');
var div2 = document.getElementById('noobsafediv2');
addEvent(div,'mouseover',mouseover,['astring',111,div2]);
function mouseover(object,e,param)
{
console.log(object,e,param);
}
c'est mon cadre et je l'appelle jNoob.
Avec Prototype JS, vous pouvez utiliser:
var target = Event.element(event);
Je suppose que vous voulez utiliser le contexte 'this' car le même gestionnaire traitera de multiples objets possibles. Dans ce cas, consultez l'excellent script AddEvent du concours de recodage de quirksmode. ( http://www.quirksmode.org/blog/archives/2005/09/addevent_recodi.html ). Ce code m'a permis d'extraire le dernier javascript de mon code HTML. Plus important encore, il semble fonctionner sur tous les navigateurs que j'ai testés. Simple et compact.
Note complémentaire: Parfois, IE (comme 7) renverra undefined pour event.target, ainsi il ne sera même pas évalué comme étant vrai ou faux (que ce soit dans un opérateur if ou ternaire). De plus, même si vous essayez typeof event.target == 'undefined', l'erreur suivante sera toujours de dire "event.target n'est pas défini". Ce qui bien sûr est stupide parce que c'est ce que vous testez.
Apparemment, il est difficile de transmettre des événements à des fonctions dans un ancien IE. Ce que vous faites pour résoudre ce problème est:
event = event ? event : window.event;
if (typeof event.target == 'undefined') {
var target = event.srcElement;
} else {
var target = event.target;
}
Notez que vous réécrivez l'événement dans des navigateurs conformes aux normes et récupérez l'événement global pour IE.
Internet Explorer 6 - 8 n'implémente pas event.currentTarget.
Citation de Réseau de développeurs Mozilla :
Sur Internet Explorer 6 à 8, le modèle d'événement est différent. Les écouteurs d'événement sont attachés avec la méthode element.attachEvent non standard. Dans ce modèle, il n'y a pas d'équivalent à event.currentTarget et il s'agit de l'objet global. Une solution pour émuler la fonctionnalité event.currentTarget consiste à envelopper votre gestionnaire dans une fonction appelant le gestionnaire à l'aide de Function.prototype.call avec l'élément comme premier argument. De cette façon, ce sera la valeur attendue.
Si vous utilisez quand même jQuery, alors jQuery se charge de normaliser l'objet événement et ses propriétés (comme indiqué à plusieurs reprises dans les autres réponses). Citation de Documents de l'API jQuery :
le système d’événements de jQuery normalise l’objet événement selon les normes du W3C.
Cette fonction crée currentTarget au cas où il s'agirait d'IE, vous n'avez donc plus besoin de patcher votre code!
function eventListener(e,t,f) {
if(e.addEventListener)
e.addEventListener(t,f);
else
e.attachEvent('on' + t,
function(a){
a.currentTarget = e;
f(a);
});
}
JS standard (ne fonctionnera pas sur IE en dessous de 9):
function myfunction(e) {
alert(e.currentTarget.id);
}
e = document.getElementById('id');
e.AddEventListener(e,'mouseover',myfunction);
Avec cette fonction (fonctionnera sur IE en dessous de 9):
function myfunction(e) {
alert(e.currentTarget.id);
}
e = document.getElementById('id');
eventListener(e,'mouseover',myfunction);
Je voudrais donner une réponse plus simple, la viande de ceci est la même que la viande dans les réponses de anas et user1515360:
if (browserDoesNotUnderstandCurrentTarget) {
someElement.onclick = function (e) {
if (!e) { var e = window.event; }
e.currentTarget = someElement;
yourCallback(e);
}
}
else {
someElement.onclick = yourCallback;
}
Substituez onclick à l'événement que vous souhaitez bien sûr.
Cela rend e.currentTarget disponible sur les navigateurs qui ne prennent pas en charge currentTarget.
bien je ne suis pas sûr mais cela peut être une solution: puisque l'élément enfant donné par srcElement n'est pas supposé avoir un événement car cela va créer des interférences avec l'événement sur l'élément parent ni aucun autre élément supérieur avant l'élément supérieur où la déclaration de l'événement (comme onmosedown = "") donc c'est le code:
if (!event) event = window.event;
if (event.currentTarget) element = event.currentTarget;
else{element = event.srcElement; while(element.onmousedown==null) element = element.parentNode;}
if(element.nodeType==3) element=element.parentNode; // defeat Safari bug
cela semble fonctionner jusqu'à présent avec moi s'il vous plaît corrigez-moi si vous trouvez un problème cz j'ai besoin d'une solution pour cela je ne veux pas utiliser jquery ..
Vous pouvez toujours utiliser un fermeture et transmettre l'élément auquel le gestionnaire d'événements a été attaché. Quelque chose dans ce sens ...
function handlerOnClick (currentTarget) {
return function () {
console.log(currentTarget);
}
}
var domElement = document.createElement('DIV');
domElement.innerHTML = 'Click me!';
domElement.onclick = handlerOnClick(domElement);
document.body.appendChild(domElement);