Why does clicking and dragging cause the parent element to be the `event.target`?

Question

On a regular click of the child div, the following code will print the ID of that specific child div that was clicked.

<div id="parent">
  <div id="A" class="child"></div>
  <div id="B" class="child"></div>
</div>

<script>
  $("#parent").on('click', event => {
     $(event.target).text(event.target.id)
  })
</script>

However, if you click on one child div and drag/release in the other child div then it will print the ID of the parent element.

This does not occur when the click handler is assigned to the children.

$(".child").on('click', event => {
    $(event.target).text(event.target.id)
})

Why is the drag action causing the event target to be the parent element in the first example?

http://jsfiddle.net/thz1esfc/

Clarification on why not duplicate of What is event bubbling and capturing?:

I understand event bubbling and capturing is relevant to "why" but just stating that it is event bubbling or capturing does not explain the scenario. It does not explain why mousedown on child element A and mouseup from child element B would cause the parent element to be the event.target instead of child element A where the click started or child element B where the click is released.

These two seem to try to explain the results but I would like some documentation showing this behavior if possible.

Technically, browser register the CLICK on the parent b/c neither 1st or 2nd does not register complete CLICK (meaning mousedown and mouseup)

It's up to the browser to handle that behavior. On Firefox at least, the click event is lost when you click in one box, and drag to a different box and release.

Possible duplicate of [What is event bubbling and capturing?](https://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing) — mpm, Aug 14 '18 at 18:25
Event bubbling and capturing is absolutely a part of what is going on, but the link does not go into detail about this specific scenario. It does not explain why triggering a click on the 1st child element and dragging/releasing into a 2nd child element would cause the parent element to be the `event.target`. — MicFin, Aug 14 '18 at 18:35
@MicFin there isn't a second child element - the 2nd child is the child of the parent not the 1st child. — kawnah, Aug 14 '18 at 18:40
I will rephrase to clarify. "It does not explain why triggering a click on child element A and dragging/releasing into child element B would cause the parent element to be the event.target." — MicFin, Aug 14 '18 at 19:01

kawnah · Accepted Answer · 2018-08-14T18:38:04.777

3

This is happening to you because a click event is technically fired on release of the click and not on the actual click itself. See: https://developer.mozilla.org/en-US/docs/Web/Events/click

You can do mousedown and it will have a more accurate effect:

$("#parent").on('mousedown', event => {
 $('#message').text(event.target.id)
})

#parent {
  width: 300px;
  height: 300px;
  background-color: cyan;
}

.child {
  height: 100px;
  width: 100px;
  background-color: grey;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div id="1" class="child">
  
  </div>
   <div id="2" class="child">
  
  </div>
</div>
<p id="message">
</p>

EDIT: comments are asking why when you click and drag to the next child to shows "parent" - this is event bubbling. You'd need to use event.stopPropagation() to stop that.

edited Aug 14 '18 at 18:38

answered Aug 14 '18 at 18:25

kawnah

3,204
8
53
103

_a click event is technically fired on release_!! when you release inside a child why the `parent` is shown instead of the `id`? – Zakaria Acharki Aug 14 '18 at 18:27
1

If I am releasing on the other child div, why is that other child div not the target? Why is the release assuming to be on the parent instead of the other child? – MicFin Aug 14 '18 at 18:28
@MicFin essentially what is happening here is event bubbling. See more here: https://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing – kawnah Aug 14 '18 at 18:35
1

@ZakariaAcharki, @MicFin, because the only common element for click is `parent` in this case _(for click = press down + release)_ Technically, browser register the CLICK on the `parent` b/c neither 1st or 2nd does not register complete CLICK – Serg Aug 14 '18 at 18:37
@kawnah can you explain why the `parent` is the target and not `child A` that was mousedown/clicked or `child B` that was mouseup/released. Is @serg correct that the browser is identifying neither `child A` or `child B` registers the full click so therefore `parent` receives click? – MicFin Aug 14 '18 at 19:36

score 0 · Answer 2 · answered Aug 14 '18 at 18:29

0

It's up to the browser to handle that behavior. On Firefox at least, the click event is lost when you click in one box, and drag to a different box and release.

answered Aug 14 '18 at 18:29

ritz

1
1
1

is this accurate? Can you share any documentation on that spec? It does sound like it could be explaining the behavior. – MicFin Aug 14 '18 at 19:39

Why does clicking and dragging cause the parent element to be the `event.target`?

2 Answers2