Javascript слушатель события mousemove не работает должным образом - PullRequest
Новая
       24

Javascript слушатель события mousemove не работает должным образом

0 голосов
/ 26 декабря 2018

Я пытаюсь сделать видимым конкретный элемент <p>, только когда моя мышь находится внутри элемента <iframe> и движется внутри элемента <iframe>.Если мышь находится вне элемента <iframe> или находится внутри элемента <iframe>, то она должна скрывать элемент <p>.

Я использую прослушиватель событий mousemove, который после просмотрав https://developer.mozilla.org/en-US/docs/Web/Events/mousemove,, который определяет событие mousemove как «Событие mousemove наступает, когда указывающее устройство (обычно мышь) перемещается при наведении на элемент.» .

Однако если вы тестируете код во фрагменте HTML, мне кажется, что это не так, потому что, как только моя мышь перемещается в элементе <iframe>, он создает элемент <p>, однаковсе еще исчезает через некоторое время, тайм-аут срабатывает и скрывает его.Перемещение мыши внутри элемента 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.log('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>

1 Ответ

0 голосов
/ 26 декабря 2018

Ифреймы могут быть хитрыми.Вы можете попробовать заключить 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

...