¿Cómo acceder a Event.target en IE9?

Question

El modelo de objetos HTML DOM define un objeto Eventwith a target property.

En cuanto a MSDN, Microsoft documenta un target property. También documentan srcElement como un alias de target de las versiones anteriores de Internet Explorer:

El objetivo propiedad es similar a srcElement en Windows Internet Explorer 8 y versiones anteriores.

---

Así que aquí estoy en Internet Explorer, sentado en una click punto de ruptura:

<div class="day" onclick="divClick(this)"> 

function divClick(sender) 
{ 
    var divCell = sender; 

y al F12 Herramientas consola puedo pedir la event objeto global:

>> event 
{ 
    actionURL : "", 
    altKey : false, 
    altLeft : false, 
    behaviorCookie : 0, 
    behaviorPart : 0, 
    bookmarks : null, 
    boundElements : {...}, 
    button : 0, 
    buttonID : 0, 
    cancelBubble : false 
    ... 
} 

Y puedo pedir el event.srcElement objeto:

>> event.srcElement 
{ 
    align : "", 
    noWrap : false, 
    dataFld : "", 
    dataFormatAs : "", 
    dataSrc : "", 
    currentStyle : {...}, 
    runtimeStyle : {...}, 
    accessKey : "", 
    className : "header", 
    contentEditable : "inherit" 
    ... 
} 

Pero event.target está vacía:

>> event.target 

Y si i observoevent, no hay target propiedad:

Entonces, ¿cómo accedo a la propiedad target deObjetoen Internet Explorer (9 (Modo de documento: Estándares IE9 (Modo de navegador: IE9)))?

Answer 1

Si desea utilizar event.target en IE9 , deberás usar addEventListener() -metodo para asignar eventhandler al elemento.

<div id="day" class="day"></div> 

document.getElementById('day').addEventListener('click',divClick,false); 

function divClick(e){ 
    alert(e.target); 
    divCell=this; 
    : 
} 

En divClick() puede hacer referencia day el simple uso de palabras clave this. El argumento e contiene una referencia al evento-objeto en sí.

Por cierto, en MSDN puede encontrar la documentación de IE más adecuada para Web development en lugar del desarrollo de Windows.

Answer 2

event.target?

¿Es necesario comprobar en él y que asigne a una variable y utilizar ese lugar ..

var target = event.target ? event.target : event.srcElement; 

puede ser que falte el punto ...

Answer 3

uso:

var target = (event.target !== undefined)? event.target.name : event.srcElement.tagName; 

a continuación:

if (target === 'A' || target === '...') { 
    ... 
} 

O: uso simple:

var target = event.srcElement.tagName; 

probado en Chrome 35 :)

Answer 4

Aquí va para mi investigación (t ested en IE9, IE10 & Modos de navegador Edge en IE11, IE8 desafortunadamente rompe jsFiddle). En el modo IE9 (IE11) event.target estaba disponible como una variable local para la función, no sé si difiere del IE9 real.

No puede acceder al event en ningún navegador con una función en línea. El problema es que cuando se hace

<element onclick="someFunc(this)"> 

y se pasa como parámetro this, this === event.target (o srcElemento), a saber, una [HTML Object], no un [Event Object].

Por lo tanto, en la práctica eso significa que esto:

<div id="foo" onclick="alert(this)"></div> 

es lo mismo que:

// note that onclick perfectly works, you don't necessarily need addEventListener 
document.getElementById('foo').onclick = function(e) { alert(e.target) } //or 
document.getElementById('foo').addEventListener('click', function(e) { alert(e.target) }, false); 

Así que destino del evento de acceso, ya sea directamente en línea como parámetro, ya sea a través de JavaScript como el parámetro objeto de target || srcElement propiedad. Puede probar los resultados por ti mismo aquí: http://jsfiddle.net/kevinvanlierde/tg6FP/2/

Nota: En caso de conectar en línea, la posición de las secuencias de comandos es crucial (derecha antes de cerrar la etiqueta del cuerpo)
Nota: En caso de conectar en línea , dado que event.target es la 'raíz' del objeto pasado, no puede acceder a otras propiedades del evento, como event.type.
Nota: Tenga cuidado con el modo de desarrollador de IE. He sabido que es engañoso (por ej., No muestra correctamente el contenido DOM en el árbol de elementos hasta que haga clic en 'Editar como HTML')

Answer 5

El problema aquí no era que no usara addEventListener() (porque la vieja escuela .onclick-la asignación también funciona). El problema fue que divClick obtuvo this (que es igual a eventobj.target), pero desea la totalidad de eventobj.

En los dos casos siguientes, solo obtiene eventobj.target con el nombre this y no tiene acceso a los argumentos pasados ​​al onclick-handler.

<div id=xyz onclick="divClick(this);"> 
document.getElementById("xyz").onclick = function() { divClick(this); }; 

que está recibiendo la eventobj como parámetro normal con la siguiente línea:

document.getElementById("xyz").onclick = divClick; 

Así se puso en marcha un evento en el elemento xyz en IE9 + y otros navegadores:

document.getElementById("xyz").onclick(eventobj) 

Answer 6

La forma más fácil de archivar esto es mediante el uso de:

var target = event.target || event.srcElement; 

• No utilice un mismo operador ternario.

La forma en que esto funciona es porque:

1. prueba si event.target es una truthy cual, si no existe en ese navegador será evaluada como falsa.
2. Si se evalúa como falsa, entonces se moverán a la siguiente operador que en este caso es event.srcElement.

Y con esto terminarás con el primer valor que está presente en el navegador actual donde se ejecuta el código.