如何在IE9中访问Event.target？

Question

HTML DOM对象模型定义了Event对象with a target property。

查看MSDN，Microsoft记录了target property。他们还将srcElement记录为早期版本的Internet Explorer中target的别名：

  

目标属性类似于Windows Internet Explorer 8及早期版本中的srcElement。

---

所以我在Internet Explorer中，坐在click断点处：

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

function divClick(sender)
{
   var divCell = sender;

在 F12工具控制台，我可以要求全局event对象：

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

我可以要求event.srcElement对象：

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

但event.target为空：

>> event.target 

如果我观看 event，则没有target属性：

那么如何在Internet Explorer中访问target对象的event属性（9（文档模式：IE9标准（浏览器模式：IE9）））？

Answer 1

event.target？

您是否需要检查它并将其分配给变量并使用它而不是..

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

可能会忽略这一点......

Answer 2

如果你想在IE9中使用event.target，你需要使用addEventListener() - 方法将eventhandler分配给元素。

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

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

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

在divClick()中，您只需使用关键字day即可this。参数e包含对事件对象本身的引用。

BTW，在MSDN中，您可以找到更适合Web development的IE文档，而不是Windows开发。

Answer 3

这是我的调查（在IE11，IE10和IE浏览器模式下测试，IE8，IE8不幸打破了jsFiddle）。在IE9模式（IE11）中，event.target可用作函数的局部变量，不知道它是否与真正的IE9不同。

您无法在任何具有内联功能的浏览器中访问event。问题是，当你做

时

<element onclick="someFunc(this)">

并传递this作为参数， this === event.target （或srcElement），即 [HTML Object] ，而不是 [Event Object]

所以在实践中意味着：

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

与：

相同

// 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);

因此，您可以通过javascript作为对象参数的target || srcElement属性直接内联作为参数访问事件目标。 您可以在此处测试结果：http://jsfiddle.net/kevinvanlierde/tg6FP/2/

注意：如果您附加内联，脚本的位置至关重要（在关闭正文标记之前）
注意：如果您附加内联，假设event.target是传递的对象的“根”，则无法访问其他事件属性，例如event.type。 注意：小心使用IE Developer模式。我知道它是欺骗性的（例如，在你点击“编辑为HTML”之前，没有在元素树中正确显示DOM内容）

Answer 4

存档的简便方法是使用：

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

• 避免使用三元运算符。

这种方式起作用的原因是：

1. 测试event.target是truthy，如果该浏览器中不存在，则评估为false。
2. 如果评估为false，则它将移至下一个运算符，在本例中为event.srcElement。

这样你就会得到执行代码的当前浏览器上的第一个值。

Answer 5

这里的问题不是你没有使用addEventListener()（因为老派.onclick - 分配也有效）。问题是divClick获得this（等于eventobj.target），但您需要整个eventobj。

在以下两种情况下，您只能以eventobj.target的名义获得this，并且您无法访问传递给onclick-handler的参数。

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

您可以使用以下行获取整个eventobj正常参数：

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

这是在IE9 +和其他浏览器中的xyz元素上启动事件的方式：

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

Answer 6

使用：

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

然后：

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

OR： 简单使用：

var target = event.srcElement.tagName;

在Chrome 35上测试：）