The mouseenter event doesn't bubble. So stopPropagation will have no effect since a new mouseenter is dispatched at each target.

And you referencing an old spec:
https://www.w3.org/TR/uievents/#event-type-mouseenter


What is the behavior you see in FireFox? I see the same behavior moving the mouse onto the Title element and leaving it.

In FireFox I see the same behavior.
Regarding `mouseenter` I do understand why it fires `eventPhase 1` (which is `capture phase`) but according to the documentation when `stopPropagation` is called all phases after it should be skipped/canceled but `mouseenter` fires `eventPhase 2` (which is `target phase`) I think this shouldn't happen.

Thank you for providing more feedback. Adding requester "dtapuska@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Quoting the text from the MDN page:

"One mouseenter event is sent to each element of the hierarchy when entering them. Here 4 events are sent to the four elements of the hierarchy when the pointer reaches the text."

You are seeing multiple mouseenter events; your stopPropagation is only called an a specific one of them.

I do agree with you but then again why `event phase 2` is fired after calling  `stopPropagation`? According to the documentation, it shouldn't happen.

Quoting W3C documentation (which is more reliable from my point of view):

"...A phase will be skipped if it is not supported, or if the event object’s propagation has been stopped. For example, ....... if stopPropagation() has been called prior to the dispatch, all phases will be skipped."

Thank you for providing more feedback. Adding requester "dtapuska@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

konr..@ your question is not very clear to me. Based on what I understand your question seems to be a two fold question.
First it seemed that you didn't expect the mouseenter event to be called at all when moving the mouse completely within a parent element and crossing the boundaries of the descendent. This expectation is incorrect. Quoting W3c documentation:

A user agent MUST dispatch this event when a pointing device is moved onto the boundaries of an element or one of its descendent elements. This event type is similar to mouseover, but differs in that it does not bubble, and MUST NOT be dispatched when the pointer device moves from an element onto the boundaries of one of its descendent elements.
https://www.w3.org/TR/uievents/#event-type-mouseenter

The second part to your question seems to be that when you call stopPropagation functions on the parent capturing listener you expected the event to stop propagating and not see that in the children listeners anymore. How did you find out this is not the case? Your example doesn't have any listener at all for the children. I modified your example removing bunch of code for simplicity and also added a mouseenter listener to one of the children just to make it a minimal more understandable example. You can see the child element mouseenter listener is not getting called when the parent capturing mouseenter element calls stopPropagation. Commenting that line would cause the child listener to get called.

https://jsfiddle.net/aek6c951/17/


If I misunderstood your question feel free to explain a little more with another minimal example to show the problem.

My main concern is not about `event phase 1`, I can understand why it happens, but about `event phase 2` (which is `target phase`) I think it shouldn't happen after calling `stopPropagation` during the `eventPhase 1` (which is `capture phase`).

Thank you for providing more feedback. Adding requester "nzolghadr@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

When moving the mouse within the parent element there is no phase 2 mouse enter event reaching the parent listener!

konr...@ please provide a simple repro and exact action you do (i.e. moving mouse from here to there) and the exact output you see and the exact output you expect to see in the console. This way we can communicate better :)

The event dispatched at event phase 1 is a completely different event dispatched at phase 2.

If it was the same event; then I agree. But back to my original quote in that a unique event is dispatched to each target.

Basically you have 3 events...

----------------------
Event 1
Mouse Enter -> target: c-parent
Mouse Enter -> currentTarget: c-parent
Mouse Enter -> EventPhase: 2
--------------------------
Event 2
Mouse Enter -> target: c-parent__content
Mouse Enter -> currentTarget: c-parent
Mouse Enter -> EventPhase: 1
--------------------------
Event 3
Mouse Enter -> target: c-parent__title
Mouse Enter -> currentTarget: c-parent
Mouse Enter -> EventPhase: 1
--------------------------

Calling stopPropagation on Event 1 has no influence on the capturing phases on Event 2 or Event 3.

I think this sentence, from the documentation, is what confuses me (".....MUST NOT be dispatched when the pointer device moves from an element onto the boundaries of one of its descendent elements."). As I understand it this means that event should not be fired when the mouse is moved inside the parent element from one descendant to another.

@Reporter: Could you please let us know whether this issue can be closed as per comment#16? This info would help us in further triaging of the issue.

Thanks!

I close this for now. Reported feel free to open a new bug or comment again here if you are still confused and having any problem with the design.