Слушатель событий Javascript mousemove не работает должным образом
Я пытаюсь сделать определенный элемент <p> видимым, только когда моя мышь находится внутри элемента <iframe> и перемещается внутри элемента <iframe>. Если мышь находится за пределами элемента <iframe> или неподвижна в элементе <iframe>, то она должна скрыть элемент <p>.
Я использую прослушиватель событий mousemove, который после просмотра https://developer.mozilla.org/en-US/docs/Web/Events/mousemove определяет событие mousemove как «Событие mousemove запускается, когда указывающее устройство (обычно мышь) перемещается над элементом»..
Однако, если вы протестируете код в фрагменте HTML, это не похоже на меня, потому что как только моя мышь перемещается внутри элемента <iframe>, он делает <p>element, однако он все равно исчезает через некоторое время, срабатывает тайм-аут и скрывает его. . Перемещение мыши в элементе iframe не вызывает повторного запуска события mousemove, пока вы не переместите мышь за пределы окна iframe, а затем снова вернете ее внутрь.
Кроме того, событие mousemove не всегда запускается, когда я перемещаю мышь из-за пределов элемента <iframe> внутрь элемента.
Может ли кто-нибудь объяснить мне, почему событие mousemove не запускается снова, когда мышь перемещается внутри элемента <iframe>, а также покажите мне, как я могу добиться, чтобы мой элемент <p> появлялся только тогда, когда мышь находится внутри элемента <iframe> и перемещается внутри элемент.
Я неправильно понял определение события mousemove, описанное в документации Mozilla, которое можно найти по ссылке выше? потому что, насколько я понимаю, это означает, что событие mousemove будет запускаться, когда мышь перемещается внутри элемента.
Большое спасибо и счастливого Рождества.
function showP() {
document.getElementById('p').classList.remove('hide');
}
function hideP() {
document.getElementById('p').classList.add('hide');
}
var timer;
document.getElementsByClassName('iframe')[0].addEventListener('mousemove', function() {
console.info('Entered iframe');
clearTimeout(timer);
showP();
timer = setTimeout(hideP, 3000);
});.hide {
display: none;
}<iframe class = "iframe" src = "https://test.com/" width = "100px" height = "100px">
</iframe>
<p id = "p" class = "hide">
Showing P Tag
</p>@vlam Я пробовал и onmouseover, и onmouseout, однако они срабатывают только при входе в элемент извне или наоборот для onnmouseout и не работают, когда вы перемещаете мышь внутри элемента. В настоящее время кажется, что событие mousemove ведет себя точно так же, как и событие onmouseover, то есть оно запускается только один раз, когда вы перемещаете мышь из-за пределов iframe внутрь него. Но это не решает мою другую проблему, которая заключается в том, чтобы он повторно запускался, когда мышь перемещается внутри элемента.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Использование iframe может быть непростым делом. Вы можете попробовать обернуть iframe в div и вместо этого настроить этот div в своем JS:
<div class = "iframe" width = "100px" height = "100px">
<iframe src = "https://test.com/" width = "100px" height = "100px">
</iframe>
</div>
Я уверен, что таким образом вы также можете использовать onmouseover и onmouseout или любое другое событие. Возможно, вам понадобится добавить CSS:
iframe {
pointer-events: none;
}
см. рабочий код: https://codepen.io/geochanto/pen/wRqvqo
Просто попробовал, но, к сожалению, после помещения его в div событие больше не запускается. См .: jsfiddle.net/jewyLqum/1.
хорошо, вам нужно еще кое-что, добавить события-указатели CSS: none; для вашего <iframe>. Тогда это работает. Проверьте это: codepen.io/geochanto/pen/wRqvqo
Это не сработало, потому что ваш <iframe> все еще перекрывал <div class = "iframe">, поэтому ваше событие mousemove не обнаруживалось. Другой способ сделать это - разместить div над iframe.
Спасибо, установка pointer-events: none помогает заставить его работать, но теперь, к сожалению, из-за этого сайт, который я загрузил в свой Iframe, не может обнаружить ни одно из своих событий щелчка. Я нашел следующий stackoverflow.com/questions/9990536/…, который я могу использовать для обнаружения щелчка даже на контейнере div, а затем, надеюсь, если он сработает, передать событие в iframe, однако это все еще может быть неточным, поскольку я не могу определить для iframe, в котором позиция мыши было инициировано событием щелчка. У вас есть решение? Спасибо.
затем вы можете играть с указателями-событиями и включать / отключать их, когда вам нужно. Я изменил его с помощью jQuery здесь: codepen.io/geochanto/pen/LMjVaB Это позволит щелкать, но только после перемещения мыши. Если время истекает, мышь должна переместиться, прежде чем вы сможете щелкнуть. Во всяком случае, есть много способов сделать это. На основании того, что вы просили, это работает. Если вам нужно что-то большее, пожалуйста, предоставьте полное описание того, чего вы пытаетесь достичь, иначе мы будем слишком долго ходить туда-сюда;)
Хорошо, дружище, большое спасибо, ты определенно ответил на мой вопрос и помог мне решить мою проблему. Чтобы дать вам представление о том, чего я пытался достичь, это то, что вы увидите, когда посмотрите любое видео YouTube в режиме рабочего стола. Когда вы наводите указатель мыши на видео, появляются элементы управления, и если вы перестанете перемещать мышь или переместите ее за пределы видеопроигрывателя, элементы управления исчезнут через некоторое время, и я хотел сделать наложение, подобное этому, для переключения между куча источников iframe :), но без нарушения событий мыши в источниках iframe.
Вы пробовали onmouseover и onmouseout? Когда onmouseover запускается для iframe, вы показываетеP, а когда onmouseout запускается для iframe, вы скрываетеP.