#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();
}
Комментарии:
1. К сожалению, не работает, div «ребенок» продолжает отображаться на консоли