Я пытаюсь измерить количество времени, которое курсор провел на элементе с событиями наведения мыши. Я объединил фрагменты кода из других вопросов и получил следующий код:
<h1 id="demo" onmouseover="start()" onmouseout="stop()">Mouse over me</h1>
<p>You've been over this sentence for <span id=seconds></span> seconds.</p>
<script>
function start() {
window.setInterval((function(){
var start = Date.now();
var textNode = document.createTextNode('0');
document.getElementById('seconds').appendChild(textNode);
return function() {
textNode.data = Math.floor((Date.now()-start)/1000);
}
}()), 1000);
}
function stop() {
}
</script>
Однако в моем текущем коде есть несколько проблем. Во-первых, мне не удалось остановить таймер, когда мышь покидает текст. Я попытался заменить начальную переменную текущей разницей во времени, но это не сработало, вероятно, из-за второй проблемы: когда курсор уходит и возвращается, создается другой таймер вместо обновления существующего. В идеале мне также было бы интересно подсчитать, сколько раз мышь вводила и оставляла текст, на который были наведены события наведения курсора мыши.