Internet Explorer 和 JavaScript 事件 currentTarget答案

【问题标题】：Internet Explorer and JavaScript event currentTargetInternet Explorer 和 JavaScript 事件 currentTarget
【发布时间】：2009-05-13 11:31:13
【问题描述】：

有没有办法使用 IE 7 或 8 获取事件的当前目标？

我们可以使用其他浏览器（firefox、opera、chrome 等） event.currentTarget 或者我们也可以使用 this 关键字来指处理事件的对象。

但在 Internet Explorer 中，我们没有 currentTarget 属性，而 this 指的是窗口对象！

那我该怎么做呢？

【问题讨论】：

是的，我做到了。但是没有找到答案...似乎 IE 根本不支持该重要功能（也是 IE 8），每次我必须使用该浏览器进行开发时，噩梦就开始了！
你总是可以沿着 JavaScript 框架路线走，比如 jQuery、Prototype 等......以抽象出差异
九年多过去了，jQuery 在 API 文档中仍然不能保证 event.currentTarget 会按预期工作。这么多年连他们都没有完成，那是不可能的壮举。

标签： javascript internet-explorer events

【解决方案1】：

你可以做类似的事情

target = (event.currentTarget) ? event.currentTarget : event.srcElement;

尽管正如@Marc 提到的，您可以使用 JQuery 框架为您规范化事件。

【讨论】：

srcElement 参考：msdn.microsoft.com/en-us/library/ms534638(v=vs.85).aspx
有用但不完整。读到这里 (howtocreate.co.uk/tutorials/javascript/eventinfo) 我发现你必须在你的代码前加上 "if(window.event){ event = window.event; }"。
不正确，event.srcElement 等于 event.target。 event.currentTarget 是另外一回事，更难以规范化。
看来@David说的对，看@987654323结尾@
我认为这个答案是错误的。 srcElement 是事件的原始来源，不一定是当前目标。

【解决方案2】：

我有类似的问题。我使用an article on brainjar.com 中所述的关键字this 解决了它

要在 IE 中获取 currentTarget 属性的等价物，请使用在标签中设置事件处理程序时 this 关键字作为参数。

...

function myHandler(event, link) { ... }

在同一页面上，您可以找到下表：

【讨论】：

【解决方案3】：

简短的回答是：使用 jQuery。

虽然 event.currentTarget 在 IE 上无法访问，但 jQuery 会为您规范化事件，因此您的代码也可以在 IE 上运行（如 here 所述）

请注意，使用event.srcElement，正如其他答案中所建议的那样，不等效，因为srcElement 对应于target，而不是currentTarget，正如@ 末尾所解释的那样987654322@.

【讨论】：

这不是问题的答案。它不提供任何解决方案。 :(
@alvincrespo：我的第一行（“使用 jQuery”）怎么不是解决方案？如果 OP 使用 jQuery，他将能够根据他的请求在 IE 7/8 上使用 event.currentTarget。
我猜这是一个答案，但我假设@xdevel2000 要求的是纯 JS 答案。对于任何误解并且没有解释我的评论，我深表歉意。
@alvincrespo：没问题。很高兴你给出一个纯 JS 的答案（你得到了我的支持 :-)。我会坚持我的观点，即跨浏览器的细微之处最好通过现有的解决方案（例如 jQuery）来处理，而不是找出它在哪里不起作用并“手动”绕过问题。
我知道这是旧的但被否决，因为 jQ 路由需要将事件传递给函数。至于获取事件目标没有明确地将事件对象传递给函数，alvincrespo 的方法是我知道的唯一方法。

【解决方案4】：

使用此函数，您可以在添加时传递对象并在侦听器中获取它。关于这个的问题是你有一个匿名函数作为 eventlistener 并且在 actionscript 中你不能删除一个匿名监听器。不知道 js。

addEvent:function(object,type,listener,param)
    {
    if(object.addEventListener)
      object.addEventListener(type, function(e){ listener(object, e, param);}, false );
    else
    if(object.attachEvent)
      object.attachEvent('on'+type, function(e){ e = getEvent(e); listener(object, e, param);});
    },

getEvent:function(e)
        {
    if(!e) e = window.event; // || event
    if(e.srcElement) e.target = e.srcElement;
    return e;
    },

removeEvent:function(object,type,listener)
    {
    if(object.removeEventListener)
    object.removeEventListener(type, listener, false);
    else
    object.detachEvent('on'+type, listener);
    }

var div = document.getElementById('noobsafediv');
var div2 = document.getElementById('noobsafediv2');
addEvent(div,'mouseover',mouseover,['astring',111,div2]);


function mouseover(object,e,param)
 {
 console.log(object,e,param);
 }

它是我的框架，我称之为 jNoob。

【讨论】：

【解决方案5】：

我假设您想要使用“this”上下文，因为同一个处理程序将处理多个可能的对象。在这种情况下，请参阅 quirksmode recoding 竞赛中出色的 AddEvent 脚本。 (http://www.quirksmode.org/blog/archives/2005/09/addevent_recodi.html)。这段代码使我能够从 html 中获取我的最后一个 javascript。更重要的是，它似乎适用于我测试过的所有浏览器。简单紧凑。

【讨论】：

【解决方案6】：

附加说明：有时 IE（如 ie 7）会为 event.target 返回 undefined，因此它甚至不会将其评估为真或假（无论是在 if 还是在三元运算符中）。此外，即使您尝试typeof event.target == 'undefined'，它仍然会出错，提示“event.target 未定义”。这当然是愚蠢的，因为那是你正在测试的。
显然，将事件传递给旧 IE 中的函数是一个问题。您要解决的问题是：

event = event ? event : window.event;
if (typeof event.target == 'undefined') {
    var target = event.srcElement;
    } else {
    var target = event.target;
    }

请注意，您在符合标准的浏览器中重写事件并为 IE 获取全局事件。

【讨论】：

请注意，event.target 是指触发事件的元素，而 event.currentTarget（问题中的那个）是正在处理事件的元素，即您设置处理程序的那个。 event.target 元素是最里面的元素，例如，在单击事件中。见这里：javascript.info/tutorial/bubbling-and-capturing.

【解决方案7】：

使用 Prototype JS，您可以使用：

var target = Event.element(event);

【讨论】：

【解决方案8】：

Internet Explorer 6 - 8 不实现 event.currentTarget。

引用Mozilla Developer Network:

在 Internet Explorer 6 到 8 上，事件模型不同。事件侦听器使用非标准 element.attachEvent 方法附加。在此模型中，没有等效于 event.currentTarget 的对象，这是全局对象。模拟 event.currentTarget 功能的一个解决方案是将处理程序包装在一个调用处理程序的函数中，该函数使用 Function.prototype.call 并将元素作为第一个参数。这样，这将是预期值。

如果您仍然使用 jQuery，那么 jQuery 会负责规范化事件对象及其属性（如其他答案中多次所述）。引用jQuery API docs:

jQuery 的事件系统根据 W3C 标准对事件对象进行规范化。

【讨论】：

【解决方案9】：

这个函数创建currentTarget以防它是IE，所以你不再需要修补你的代码！

function eventListener(e,t,f) {
   if(e.addEventListener)
       e.addEventListener(t,f);
   else
       e.attachEvent('on' + t,
                     function(a){
                         a.currentTarget = e;
                         f(a);
                     });
}

普通 JS（在 9 以下的 IE 上不起作用）：

function myfunction(e) {
    alert(e.currentTarget.id);
}

e = document.getElementById('id');
e.AddEventListener(e,'mouseover',myfunction);

有了这个功能（可以在9以下的IE上工作）：

function myfunction(e) {
    alert(e.currentTarget.id);
}
e = document.getElementById('id');
eventListener(e,'mouseover',myfunction);

【讨论】：

真的吗？你认为“那些 jQuery 家伙”不想让人们知道这一点吗？他们的代码是开源的，我希望 Resig 不在乎。
真的吗？那么为什么我是唯一一个在这里写出这样的解决方案的人呢？
看起来和anas对我的回答几乎一样。但是，如果您偏执并想要我们与他们的情况，请有这种感觉：D
不是我想要做的，但无论在哪里，我都能看到 Jquery。感觉很快人们将无法在没有 Jquery 的情况下按 id 隐藏 div。
非常非常真实......在 Meta 和其他地方有一个关于每个 javascript 问题的答案如何以“使用 jQuery 和......”开头的笑话/模因。但是，这个问题不是关于 jQuery，并且有人尝试在 SO 上没有 POV 问题或答案。抨击“jQuery 家伙”没有什么有趣或相关的。这就是我的观点。

【解决方案10】：

currentTarget property is supported from IE version 9 onwards.

Try this sample in IE9+

【讨论】：

【解决方案11】：

我想给出一个更简单的答案，这个的肉和anas的肉和user1515360的答案是一样的：

if (browserDoesNotUnderstandCurrentTarget) {
        someElement.onclick = function (e) {
                if (!e) { var e = window.event; }
                e.currentTarget = someElement;
                yourCallback(e);
        }
}
else {
        someElement.onclick = yourCallback;
}

当然，用 onclick 代替你想要的任何事件。

这使得 e.currentTarget 在不支持 currentTarget 的浏览器上可用。

【讨论】：

【解决方案12】：

我不确定，但这可能是一个解决方案：因为由 srcElement 给出的子元素不应该有一个事件，因为这会干扰父元素上的事件，也不会干扰事件声明（如 onmosedown=""）的顶部元素之前的任何其他上层元素，所以这是代码：

if (!event) event = window.event; 
if (event.currentTarget) element = event.currentTarget; 
else{element = event.srcElement; while(element.onmousedown==null) element = element.parentNode;}
if(element.nodeType==3) element=element.parentNode;  // defeat Safari bug

到目前为止，这对我来说似乎工作得很好，如果你发现问题，请纠正我，因为我需要一个解决方案我不想使用 jquery..

【讨论】：

【解决方案13】：

您总是可以使用 closure 并传入事件处理程序已附加到的元素。类似的东西......

function handlerOnClick (currentTarget) {
    return function () {
        console.log(currentTarget);
    } 
}

var domElement = document.createElement('DIV');
domElement.innerHTML = 'Click me!';
domElement.onclick = handlerOnClick(domElement);
document.body.appendChild(domElement);

【讨论】：