How to capture jQuery event always on the parent element

Question

HTML:

<div class="parent">
     <div class="child"></div>
</div>

jQuery:

$(".parent").on('click', callback);

The problem is that depends on the styling (specifically where the mouse pointer clicks) the click event is fired on .child or .parent depending on the location of the mouse.

Is there a way of getting the event always from .parent even if it was clicked on .child? How I used to solve this issue is by checking the id or class of $(event.target) and if it was not the .parent then I would do $(event.target).parent() but I need a solution that works for several scenarios rather than a fix.

Similar : http://stackoverflow.com/questions/2457246/jquery-click-function-exclude-children — user2226755, Jul 08 '14 at 09:49

Sudharsan S · Accepted Answer · 2014-07-08T09:57:44.313

3

Use event.currentTarget instead of event.target. The event.currentTarget property is the current DOM element within the event bubbling phase, and is typically equal to this.

event.currentTarget - The current DOM element within the event bubbling phase.

event.target - The DOM element that initiated the event.

$(".parent").on('click', callback);

function callback(event){

    alert( event.currentTarget === this );
}

fiddle for event.currentTarget - FIDDLE

fiddle for event.target - FIDDLE2

edited Jul 08 '14 at 09:57

answered Jul 08 '14 at 09:27

Sudharsan S

15,336
3
31
49

You answer is correct (same for @horssujet) ! Thank you I just have to use `$(event.currentTarget)` – Jad Joubran Jul 08 '14 at 09:50
Can you update your answer? noting that people just have to use `$(event.currentTarget)` – Jad Joubran Jul 08 '14 at 09:53

user2226755 · Answer 2 · 2014-07-08T09:53:24.123

1

Check if target is currentTarget.

if (event.target == event.currentTarget)

http://jsbin.com/jehuz/1/edit

Javascript :

$(".parent").on('click', function (event) {
    if (event.target == event.currentTarget) return;

    $(event.currentTarget);
}

Sample javascript :

$(".parent").on('click', function (event) {
    $("p.1").text("target : "+event.target.className);
    $("p.2").text("currentTarget : "+event.currentTarget.className);
    if (event.target == event.currentTarget) {
        $(this).toggleClass("a");
    }
});

edited Jul 08 '14 at 09:53

answered Jul 08 '14 at 09:44

user2226755

12,494
5
50
73

Thank you! All I need is to do this: `$(event.currentTarget)` can you update you answer? – Jad Joubran Jul 08 '14 at 09:49
` if (this == event.currentTarget) return;` I think this is wrong.. we don't even need to do a check no? – Jad Joubran Jul 08 '14 at 09:53
@JadJoubran if (this == event.currentTarget) it is right it check the current element and the clicked one. if any doubt regarding this see my fiddle – Sudharsan S Jul 08 '14 at 09:55
yeah but no need to check if this === event.currentTarget because I need both events on the parent and on the child, but I always want to get a revence of the event.currentTarget (the .parent in the example) that's why your solution was correct – Jad Joubran Jul 08 '14 at 09:57
`1` and `2` not valid class names. [What characters are valid in CSS class selectors?](http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-selectors) – t.niese Jul 13 '14 at 09:27

score 0 · Answer 3 · edited Mar 20 '17 at 10:29

Keep this code as it is:

HTML:

<div class="parent">
     <div class="child"></div>
</div>

jQuery:

$(".parent").on('click', callback);

but add:

$('.child').click(function() {
   //find the parent of the clild
   var parent = $(this).closest('.parent');
   //if it exists
   if (parent.length > 0)
   {
      //fire the click event, above, thus running 'callback'
      parent.click();
   }
});

That said this does sound like an XY Problem

How to capture jQuery event always on the parent element

3 Answers3