11

HTML DOM 对象模型定义了一个具有属性Event的对象。target

查看 MSDN，Microsoft 记录了一个target属性。它们还记录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 Tools控制台我可以请求全局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）））？

4

6 回答 6

13

事件.目标？

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

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

可能没有抓住重点……

于 2012-05-18T18:26:42.047 回答
4

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

<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包含对事件对象本身的引用。

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

于 2012-05-19T06:31:33.310 回答
2

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

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

<element onclick="someFunc(this)">

并且您this作为参数this === event.target（或 srcElement）传递，即 a [HTML Object]，而不是 a [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 内容）

于 2014-06-23T13:11:35.437 回答
1

存档此文件的简单方法是使用：

var target = event.target || event.srcElement;
  • 避免使用三元运算符。

其工作方式是因为：

  1. 测试是否event.target为真，如果在该浏览器中不存在，则评估为假。
  2. 如果计算结果为 false，那么它将移动到下一个运算符，在这种情况下是event.srcElement.

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

于 2016-06-20T22:13:29.587 回答
0

这里的问题不是你没有使用addEventListener()（因为老派.onclick-assignment 也有效）。问题是divClickgot 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)
于 2016-02-26T15:37:36.520 回答
-2

利用：

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

然后：

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

或：简单使用：

var target = event.srcElement.tagName;

在 Chrome 35 上测试 :)

于 2014-06-23T09:06:46.563 回答