28

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;
        if(!originalElement){originalElement=e.originalTarget;}                         
});

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

Alana Storm
  • 164,128
  • 91
  • 395
  • 599
  • 1
    Stumbled on this old question wondering why **[this answer](http://stackoverflow.com/a/4816990/2407212)** with only one third as many votes as the accepted answer seems so very very much better to me. – Jonathan Apr 29 '14 at 22:36

5 Answers5

37

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 http://docs.jquery.com/Events/jQuery.Event#event.target event.target might do...]

eimaj
  • 645
  • 5
  • 4
  • 8
    Isn't this the sort of thing jQuery should be abstracting? I'm really surprised at this. – cletus Jan 27 '09 at 21:58
  • I remember trying e.target a while back running into problems with it. It looks like they've since been fixed (or else I've been fixed since a while back). Also, fancy termination tricks read like two lines to me ;) – Alana Storm Jan 27 '09 at 22:17
  • As of 2022, `e.srcElement` is deprecated (https://developer.mozilla.org/en-US/docs/Web/API/Event/srcElement) – Overasyco Aug 25 '22 at 16:30
24

I believe e.target is what you require

$('body').bind('click', function(e){
                e.target // the original target
                e.target.id // 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

Russ Cam
  • 124,184
  • 33
  • 204
  • 266
22

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.target || event.srcElement || event.originalTarget;

event.target works on Firefox, Opera, Google Chrome and Safari.

JussiR
  • 2,055
  • 3
  • 21
  • 23
2

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 ($(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);
});
Community
  • 1
  • 1
Joey T
  • 774
  • 7
  • 11
0

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

spbala
  • 686
  • 6
  • 7