鼠标移动侦听器时元素更改为 "element inside"

Question

所以这是我的问题。我有两个 div 一个在另一个里面，我将类型为 mousemove 的 eventListener 设置为 parent div。问题是当我在 child div 上移动鼠标时，元素目标也会发生变化。我怎样才能使 eventListener 的元素成为 parent 元素？

例如：

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

所以现在我要创建一个函数，当鼠标在 parent div

上移动时将被触发

function handleShowElement(e){

console.log(e.target)

}

所以控制台会像往常一样向我显示“parent”，但是一旦我将鼠标移到 div“child”上，元素就会变为 div "child" 并显示在控制台上。

有没有什么地方可以让我移动鼠标并且元素永远不会改变？使元素始终为“parent” div ?

Answer 1

使用Event.preventDefault()

在 https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

的引用

对于您的情况，代码如下：

function handleShowElement(e){

   e.preventDefault();

}

Answer 2

虽然 Event.preventDefault() 可能有效，但更具体地说，您真正需要的是 而不是 以允许事件传播，即也申请父级 div。您可以使用 Event.stopPropagation()

精确地做到这一点

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

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

鼠标移动侦听器时元素更改为 "element inside"

Element changing to "element inside" on mouse move listener

javascript

html

mouseevent

element

onmousemove