Best way to get the Original Target

What's a jQuery like and/or best practices way of getting the original target of an event in jQuery (or in browser javascript in general).

I've been using something like this

$('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;

which works, but I'm not pleased with the two line feature sniffing. Is there a better way?



You can do it in one line with var originalElement = e.srcElement || e.originalTarget; but it ain't pretty JQuery-like ;-)

[Edit: But according to might do...]


I believe is what you require

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

If you go to the jQuery in Action website and download the source code, take a look at

  • Chapter 4 - dom.2.propagation.html

which deals with event propagation with bubble and capture handlers


Using event.originalTarget can cause "Permission denied to access property 'XYZ' from a non-chrome context" -error, so i'd recommend using following:

var target = || event.srcElement || event.originalTarget; works on Firefox, Opera, Google Chrome and Safari.


In conjunction with How to detect a click outside an element? here is how you might trap a sub-widget with similar hide-when-clicked-outside functionality to prevent your own pop-over from hiding along with it; in this case, we are trapping the JQuery UI Datepicker pop-over widget:

// 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 ($('#ui-datepicker-div').length>0) return;

    //toggle shut our widget pop-over

    // now, unbind this event since our widget is closed:

in normal Javascript, var t = (e.originalTarget)?e.originalTarget:e.srcElement; should be enough to read it across all browsers.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.