当鼠标悬停在 html 元素上时，如何在鼠标悬停时调用函数
示例：
<script>
function a() {
"special code hear"
}
</script>
<div onmouseover( 'a()')> </div>
如果将鼠标悬停在div上而不是让它调用该函数一次，我怎么能继续调用该函数。
答案 0 :(得分：6)
事件不会自动重复。您可以在鼠标结束时使用计时器重复执行命令，但不要忘记在onmouseout事件中停止计时器。您需要在函数之外的变量来跟踪计时器，以便可以取消它，这就是我们单独声明var repeater的原因。
<script>
var repeater;
function a() ...
</script>
<div onmouseover="repeater=setInterval(a(), 100);" onmouseout="clearInterval(repeater);"></div>
答案 1 :(得分：3)
以下是使用setTimeout（ DEMO HERE ）的一种可能解决方案，它将每秒重复一次：
HTML CODE：
<div id='div'>test</div>
JS代码：
<script>
document.getElementById('div').onmouseover=function(){a();};
function a(){
//some code here
setTimeout(a,1000);
}
</script>
答案 2 :(得分：1)
var pee = '';
$('#poop').mouseover(function(){
pee = setInterval(function() {
// Do something every 5 seconds
alert('hi');
}, 1000);
});
$('#poop').mouseout(function() {
clearInterval(pee);
});
答案 3 :(得分：0)
你应该在这里使用setInterval()功能...
它还使您能够在任何您想要的时间间隔内调用该函数
像：setInterval("a()",1000);
这里的时间是1/1000秒，所以1000意味着1秒
你可以把这个setInterval函数放在任何函数中说b()并从div标签中调用b()函数：
<div onmouseover="b()">
答案 4 :(得分：0)
<script type="text/javascript">
var tId = null,
time = 100;
$( '#test' ).hover(
function( event ) {
tId = setTimeout( function() {
}, time);
},
function( event ) {
clearTimeout( tId );
}
)
</script>
<div id="test">test</div>
答案 5 :(得分：0)
//
// try the timer factory
//
function timer ( callbacks, delay, fireNTimes ) {
timer._cb ||
( timer._cb = function () { return true; } );
return (function ( callbacks, delay, fireNTimes ) {
var
un,
timerState = {
'current-count' : 0,
'delay' : Math.abs( parseFloat( delay ) ) || 1000,
'repeat-count' : Math.abs( parseInt( fireNTimes ) ) || Number.POSITIVE_INFINITY,
'running' : false,
'interval' : un
},
callback = {
onTimer: callbacks.onTimer || timer._cb,
onStart: callbacks.onStart || timer._cb,
onStop : callbacks.onStop || timer._cb,
onEnd : callbacks.onEnd || timer._cb
};
return {
ctx: this,
startargs: [],
start: function ( /* callbacks_context, ...params */ ) {
var
that = this,
args = Array.prototype.slice.call( arguments, 1 );
( arguments[0] !== un ) && ( this.ctx = arguments[0] );
( args.length != 0 ) && ( this.startargs = args );
this.running() || (
timerState.running = true,
callback.onStart.apply( this.ctx, this.startargs ),
timerState['current-count'] += 1,
callback.onTimer.apply( this.ctx, this.startargs ),
( timerState['current-count'] == timerState['repeat-count'] ) &&
(
callback.onEnd.apply( this.ctx, this.startargs ),
( timerState["current-count"] = +( timerState.running = false ) ), true
) ||
( timerState.interval =
window.setInterval( function () {
timerState['current-count'] += 1;
callback.onTimer.apply( that.ctx, that.startargs );
( timerState['current-count'] == timerState['repeat-count'] ) &&
that.reset() &&
callback.onEnd.apply( that.ctx, that.startargs );
}, timerState.delay
)
)
);
return this;
},
stop: function () {
this.running() &&
(
window.clearInterval( timerState.interval ),
timerState.interval = un,
timerState.running = false,
callback.onStop.apply( this.ctx, this.startargs )
);
return this;
},
reset: function () {
return this.running() &&
( ! ( timerState["current-count"] = +( timerState.running = false ) ) ) &&
( window.clearInterval( timerState.interval ), true ) &&
( ( timerState.interval = un ), this );
},
currentCount: function () {
return timerState['current-count'];
},
delay: function () {
return timerState.delay;
},
repeatCount: function () {
return timerState['repeat-count'];
},
running: function () {
return timerState.running;
}
};
})( callbacks, delay, fireNTimes );
}
var
tm = timer(
{
onStart : function () { console.log( 'start:', 'this === ', this, arguments ); },
onTimer : function () { console.log( 'timer:', 'this === ', this, arguments ); },
onEnd : function () { console.log( 'done:', 'this === ', this, arguments ); },
onStop : function () { console.log( 'pause:', 'this === ', this, arguments ); }
},
2000
),
el = document.getElementById('btn1'),
o = { p1:'info' };
el.onmouseover = function () { tm.start( el, o ); };
el.onmouseout = function () { tm.stop(); };
//
//
// start: this === <button id="btn1"> [Object { p1="info"}]
// timer: this === <button id="btn1"> [Object { p1="info"}]
// timer: this === <button id="btn1"> [Object { p1="info"}]
// timer: this === <button id="btn1"> [Object { p1="info"}]
// pause: this === <button id="btn1"> [Object { p1="info"}]
//
// etc...
//
//
答案 6 :(得分：0)
正如其他人已经提到的那样，可以使用setInterval重复调用函数，并且可以使用clearInterval来停止它。
如果您正在寻找一般解决方案，您可以使用以下内容：
function repeatWhileMouseOver(element, action, milliseconds) {
var interval = null;
element.addEventListener('mouseover', function () {
interval = setInterval(action, milliseconds);
});
element.addEventListener('mouseout', function () {
clearInterval(interval);
});
}
这将启动鼠标位于element之上的时间间隔，并将每action调用milliseconds个函数。当鼠标离开元素时，将停止重复操作（直到您再次悬停元素）。
只是为了显示一个简单的应用程序，它计算您悬停元素的累计（完整）秒数：
function repeatWhileMouseOver(element, action, time) {
var interval = null;
element.addEventListener('mouseover', function() {
interval = setInterval(action, time);
});
element.addEventListener('mouseout', function() {
clearInterval(interval);
});
}
var counter = 1;
function count() {
console.log(counter++);
}
repeatWhileMouseOver(document.getElementById('over'), count, 1000);#over {
border: 1px solid black;
}<span id="over">Hover me (at least one second)!</span>
当您运行代码段注释时，它会在您离开元素时停止计数，但是当您再次悬停它时它会重新开始计数。
也许重要的是要注意mouseout也可以替换为mouseleave，同样适用于mouseover和mouseenter。如果附加处理程序的元素具有子元素，它们将表现不同。
关于兼容性的说明：
答案 7 :(得分：0)
我认为您正在寻找的实际上是onmousemove事件，这是在悬停某些元素时访问event对象的一种更干净的方法。
<script>
function a() {
"special code hear"
}
</script>
<div onmousemove( 'a()')> </div>
onmousemove事件，请检查this example from W3 School。
要了解有关此事件的更多信息，Mozilla docs涵盖了有关此事件的很多信息。