Элемент меняется на "элемент внутри" при перемещении мыши.

#javascript #html #mouseevent #element #onmousemove

Вопрос:

так что это мой вопрос. У меня есть два дива один внутри другого, и я установил список событий типа mousemove в родительский div. Проблема в том, что когда я перемещаю мышь на дочерний элемент, цель элемента также меняется. Как я могу сделать так, чтобы элемент списка событий был просто родительским элементом ?

Например:

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

Итак, теперь я собираюсь создать функцию, которая будет срабатывать при перемещении мыши по родительскому div

 function handleShowElement(e){

console.log(e.target)

}

Таким образом, консоль покажет мне «родителя» как обычно, но как только я наведу курсор мыши на div «дочерний», элемент изменится на div «дочерний» и отобразит его на консоли.

Есть ли в любом случае место, где я могу перемещать мышь, и элемент никогда не меняется ? Сделать так, чтобы элемент всегда был «родительским» div ?

Ответ №1:

Хотя 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
}

1. К сожалению, не работает, div «ребенок» продолжает отображаться на консоли

2. @DenisCoder, пожалуйста, попробуйте e.currentTarget вместо e.target .

3. Спасибо! это работает !!! Можете ли вы сделать это в качестве ответа для людей, которые получат ваш ответ ? Тогда я закрою этот вопрос

4. @DenisCoder Рад, что это помогло. Это уже ответ, теперь я сделал его более полным. Возможно, вы захотите принять это как принятое вами решение ;).

Ответ №2:

Воспользуйся Event.preventDefault()

Рефренс на https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

В вашем случае код выглядит следующим образом:

 function handleShowElement(e){

   e.preventDefault();

}