如何在 IE9 中访问 Event.target？

Question

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

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

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（9（文档模式：IE9 标准（浏览器模式：IE9）））中访问 event 对象的 target 属性？

Answer 1

事件.目标？

您是否需要检查它并将其分配给一个变量并使用它来代替..

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

可能没抓住重点……

Answer 2

如果您想在 IE9 中使用event.target，则需要使用addEventListener()-方法将事件处理程序分配给元素。

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

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

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

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

顺便说一句，在 MSDN 中，您可能会找到更适合 Web development 而不是 Windows 开发的 IE 文档。

Answer 3

这是我的调查（在 IE9、IE10 和 IE11 上的 Edge 浏览器模式下测试，不幸的是 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 开发人员模式。我知道它是欺骗性的（例如，在您单击“编辑为 HTML”之前，无法在元素树中正确显示 DOM 内容）

Answer 4

存档的简单方法是使用：

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

• 避免使用三元运算符。

这样的工作方式是因为：

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

这样，您最终将得到执行代码的当前浏览器上存在的第一个值。

Answer 5

这里的问题不是你没有使用addEventListener()（因为老式的.onclick-assignment 也可以）。问题是divClick 得到了this（等于eventobj.target），但你想要整个eventobj。

在以下两种情况下，您只能在 this 的名称下获得 eventobj.target，并且您无权访问传递给 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 === '...') {
    ...
}

或者： 简单使用：

var target = event.srcElement.tagName;

在 Chrome 35 上测试 :)