Element changing to "element inside" on mouse move listener

Question

so this is my question. I have two divs one inside of another and i set an eventListener of type mousemove to the parent div. The problem is that when i move the mouse on the child div the element target also changes. How can i make to the element of the eventListener just be the parent element ?

For example:

<div id="parent" onmousemove="handleShowElement">
   <div id="child">
   </div>
</div> 

So now i'm going to create a function the will be triggered when the mouse move on the parent div

function handleShowElement(e){

console.log(e.target)

}

So the console will show me the "parent" as normal, but as soon as i move the mouse on the div "child" the element changes to the div "child" and shows it on the console.

Is there anyway where i can move the mouse and the element never changes ? Make a way to the element be always the "parent" div ?

Answer 1

Although Event.preventDefault() may work, but to be more specific, what you really need is not to allow the event to propagate i.e. also apply for the parent div. You can precisely do that by using Event.stopPropagation()

function handleShowElement(e){
    e.stopPropagation();

    // access the target from which the event got triggered
    let source = e.currentTarget;
    
    // do some processing
}