Событие Mousemove после события Onclick
У меня есть аналогичная проблема, но я использую чистый js. Насколько я понимаю, после того, как я щелкнул div, он должен начать выводить на консоль сообщение `` Событие перемещения мыши '' каждый раз, когда я перемещаю курсор над div, но на самом деле это происходит только один раз, когда я щелкаю div, что тоже странно, потому что щелчок не mosemove. Не могли бы вы помочь мне разобраться в этом поведении?
<div style = "width:100px; height:100px; border:solid black 1px" onclick = "handleClick(event)"></div>
<script>
let div = document.getElementsByTagName('div')[0];
function handleClick(event){
div.addEventListener('onmousemove', handleMove(event));
}
function handleMove(event){
console.info('Mousemove event has occurred');
}
</script>div.addEventListener('onmousemove', handleMove(event)); and executes handleMove(event); instead:
<div style = "width:100px; height:100px; border:solid black 1px" onclick = "handleClick(event)"></div>
<script>
let div = document.getElementsByTagName('div')[0];
function handleClick(event){
handleMove(event);
}
function handleMove(event){
console.info('Mousemove event has occurred');
}
</script>Обновление: я думал пройти handleMove без (), но запутался в Atom IDE (из-за бледного выделения), так что пусть Атом не сбивает вас с толку!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Looks like it ignores this part div.addEventListener('onmousemove', handleMove(event)); and executes handleMove(event); instead:
Да потому что это то, что вы написали;)
div.addEventListener('onmousemove', handleMove(event));
Вышеупомянутое выполняет функцию handleMove, передавая ей event.
Сравните это с фактическим созданием обработчика событий (без скобок после handleMove):
<div style = "width:100px; height:100px; border:solid black 1px" onclick = "handleClick(event)"></div>
<script>
let div = document.getElementsByTagName('div')[0];
function handleClick(event){
console.info(`handleClick`);
div.addEventListener('mousemove', handleMove);
}
function handleMove(event){
console.info('Mousemove event has occurred');
}
</script>Также: событие - mousemove, а не onmousemove.
Спасибо @ Sébastien за быстрый и полезный ответ!
прослушиватель событий должен быть «mousemove», а не «onmousemove». что-то вроде этого:
<div style = "width:100px; height:100px; border:solid black 1px" onclick = "handleClick(event)"></div>
<script>
let div = document.getElementsByTagName('div')[0];
function handleClick(event){
div.addEventListener('mousemove', function(event) { handleMove(event) });
}
function handleMove(event){
console.info('Mousemove event has occurred');
}
</script>Если вы посмотрите на синтаксис addEventListener, который здесь document.addEventListener(event, function, useCapture) для параметра event, четко укажите, что (здесь)
Required. A String that specifies the name of the event.
Note: Do not use the "on" prefix. For example, use "click" instead of "onclick".
Так что замените onmousemove на mousemove
<div style = "width:100px; height:100px; border:solid black 1px" onclick = "handleClick(event)"></div>
<script>
let div = document.getElementsByTagName('div')[0];
function handleClick(event){
div.addEventListener('mousemove', handleMove);
}
function handleMove(event){
console.info('Mousemove event has occurred');
}
</script>
попробуйте поменять
div.addEventListener('onmousemove', handleMove(event)); to div.addEventListener('mousemove', handleMove);как видно здесь