获得原始目标的最佳方法答案

【问题标题】：Best way to get the Original Target获得原始目标的最佳方法
【发布时间】：2009-01-27 21:50:00
【问题描述】：

在 jQuery（或一般的浏览器 javascript）中获取事件的原始目标的 jQuery 和/或最佳实践方法是什么。

我一直在使用类似的东西

$('body').bind('click', function(e){
        //depending on the browser, either srcElement or 
        //originalTarget will be populated with the first
        //element that intercepted the click before it bubbled up
        var originalElement = e.srcElement;
        if(!originalElement){originalElement=e.originalTarget;}                         
});

这行得通，但我对两行特征嗅探不满意。有没有更好的办法？

【问题讨论】：

偶然发现了这个老问题，想知道为什么 this answer 的票数只有接受答案的三分之一，这对我来说似乎好得多。

标签： javascript jquery events dom delegates

【解决方案1】：

您可以使用var originalElement = e.srcElement || e.originalTarget; 在一行中完成，但它不像 JQuery ;-)

[编辑：但根据http://docs.jquery.com/Events/jQuery.Event#event.target event.target 可能会...]

【讨论】：

这不是 jQuery 应该抽象的东西吗？我对此感到非常惊讶。
我记得在尝试 e.target 时遇到了问题。看起来他们已经被修复了（或者我已经修复了一段时间）。此外，花哨的终止技巧对我来说就像两行;)

【解决方案2】：

我相信 e.target 是您所需要的

$('body').bind('click', function(e){
                e.target // the original target
                e.target.id // the id of the original target                                               
});

如果你去jQuery in Action website下载源代码，看看

第 4 章 - dom.2.propagation.html

通过气泡和捕获处理程序处理事件传播

【讨论】：

【解决方案3】：

使用event.originalTarget 可能会导致“Permission denied to access property 'XYZ' from a non-chrome context”-错误，所以我建议使用以下内容：

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

event.target 适用于 Firefox、Opera、Google Chrome 和 Safari。

【讨论】：

+1：这是唯一适合我跨浏览器的版本。

【解决方案4】：

结合How to detect a click outside an element?，您可以使用类似的“点击时隐藏”功能来捕获子小部件，以防止您自己的弹出窗口随之隐藏；在这种情况下，我们将捕获 JQuery UI Datepicker 弹出窗口小部件：

// not using jquery .one handler for this, so we can persist outside click later
$('html').click(function(evt) {
    // just return if element has the datepicker as a parent
    if ($(evt.target).parents('#ui-datepicker-div').length>0) return;

    //toggle shut our widget pop-over
    $('#mywidget').toggle();

    // now, unbind this event since our widget is closed:
    $(this).unbind(evt);
});

【讨论】：

【解决方案5】：

在普通的 Javascript 中，var t = (e.originalTarget)?e.originalTarget:e.srcElement;应该足以在所有浏览器上阅读它。

【讨论】：

这与var t = e.srcElement || e.originalTarget; 相同（只是更长！）