Странная вещь с onmousemove javascript

Question

Привет, ребята:) Если я передам div в примере с указателем мыши, функция печатает на консоли два раза, это означает, что событие onmousemove запускается два раза. Я также напечатал координаты указатель мыши и то, как вы можете видеть на изображении ниже, я не перемещаю также вертикально, но только горизонтально. Как возможно, что событие onmousemove запущено, считается, что div имеет ширину 1 пиксель? Как возможно, что событие onmousemove запускается два раза что div имеет ширину в 1 пиксель?

<div id="div1"> 

</div> 

#div1{ 
    height:200px; 
    width:1px; 
    background:red; 

} 


document.getElementById("div1").onmousemove= function(){ 

       console.log("in mousemove function"); 
       console.log(event.clientX); 
       console.log(event.clientY); 

      }; 

Answer 1

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

Будет более понятным, если вы добавите больше ширины в div.

То, что вы правильно хочет onmouseenter, который будет вызываться один раз при входе в DIV:

document.getElementById('div1').addEventListener('mouseenter', function() { 
    console.log('mouse entered div'); 
}); 

Answer 2

Изменение console.log, чтобы предупредить, и вы заметите, что событие срабатывает только один раз. Меня устраивает. Я пробовал использовать тот же код, что и javascript в DOM.

Я также изменил ширину на 20 пикселей, чтобы быть уверенным в этом.

Answer 3

Вот скрипка вашего примера кода: https://jsfiddle.net/jy8u4y2m/

Вы заметите, что в то время как ваш DIV является 1px широкими, также 200px высока. Это означает, что если вы введете div с помощью мыши, будет запущен onmousemove. Однако, если вы затем переместите указатель мыши до выхода из границ div, событие продолжит запуск. Мое предположение заключается в том, что вы получаете несколько вызовов, потому что вы не двигаете мышью совершенно горизонтально.

Как отправлено @andlrc, если вы хотите использовать один триггер, вместо этого вы должны использовать mouseenter.