如何在 IE9 中访问 Event.target？

Posted 2023-03-05

【中文标题】如何在 IE9 中访问 Event.target？

【英文标题】：How to access Event.target in IE9?

【发布时间】：2012-05-26 07:51:18

【问题描述】：

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 属性？

【问题讨论】：

您是否考虑过让 jQuery 之类的库为您完成繁琐的工作？

【参考方案1】：

事件.目标？

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

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

可能没抓住重点……

【讨论】：

既然 IE(9) 说它支持event.target，我希望（只）使用event.target，但我没有看到任何event.target。

【参考方案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 文档。

【讨论】：

“如果你想使用event.target 是IE9，你需要使用addEventListener()” 有没有关于这方面的参考资料可以阅读更多？我搜索了 IEBlog，但找不到任何提及 - event.target 上的 MSDN 页面也没有提及。我想找到说分配onclick 是“错误”的原始描述。

嗯...对不起，我无法为您指出任何确切的参考，但这是我通过使用它了解到的有关 IE9 的知识，并且它有效...onclick没错，但在 IE9 中，它只是保留为与旧版 IE 中的行为完全相同。

@Teemu : 我可以在 jQuery 中实现同样的效果吗？？

@hitesh 是的，jQuery 规范化了一些 Event 属性（如 .target），但您必须使用 jQuery 设置侦听器。

【参考方案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 内容）

【参考方案4】：

存档的简单方法是使用：

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

避免使用三元运算符。

这样的工作方式是因为：

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

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

【参考方案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)

【参考方案6】：

使用：

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

然后：

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

或者： 简单使用：

var target = event.srcElement.tagName;

在 Chrome 35 上测试 :)