当鼠标悬停在html元素上时，如何在鼠标悬停时继续调用函数
例子：
<script>
function a() {
"special code hear"
}
</script>
<div onmouseover( 'a()')> </div>
当鼠标悬停在 div 上而不是让它调用一次函数时，如何继续调用该函数。
问问题
39090 次
8 回答
9
事件不会自动重复。您可以使用计时器在鼠标悬停时重复命令，但不要忘记在 onmouseout 事件时停止计时器。您需要在函数之外使用一个变量来跟踪计时器，以便可以取消它，这就是我们var repeater单独声明的原因。
<script>
var repeater;
function a() ...
</script>
<div onmouseover="repeater=setInterval(a(), 100);" onmouseout="clearInterval(repeater);"></div>
于 2013-08-31T03:46:26.903 回答
4
这是使用setTimeout（DEMO HERE）的一种可能的解决方案，它将每秒重复一次：
HTML 代码：
<div id='div'>test</div>
JS代码：
<script>
document.getElementById('div').onmouseover=function(){a();};
function a(){
//some code here
setTimeout(a,1000);
}
</script>
于 2013-08-31T03:49:39.560 回答
1
试试这个小提琴
var pee = '';
$('#poop').mouseover(function(){
pee = setInterval(function() {
// Do something every 5 seconds
alert('hi');
}, 1000);
});
$('#poop').mouseout(function() {
clearInterval(pee);
});
于 2013-08-31T03:49:38.117 回答
1
正如其他人已经提到的那样，重复调用一个函数可以使用来实现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。如果您附加处理程序的元素具有子元素，它们的行为会有所不同。
只是关于兼容性的说明：
于 2018-03-12T19:53:30.133 回答
0
你应该setInterval()在这里使用函数......
它还使您能够在您想要的任何时间间隔内调用该函数：setInterval("a()",1000);
这里的时间是 1/1000 秒，所以 1000 表示 1 秒，您可以将此 setInterval 函数放在任何函数中，并从 divb()调用该函数b()标签：
<div onmouseover="b()">
于 2013-08-31T03:45:08.527 回答
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>
于 2013-08-31T03:49:16.020 回答
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...
//
//
于 2013-09-01T10:43:47.800 回答
0
我认为您正在寻找的实际上是onmousemove事件，这是一种在悬停某些元素时访问event对象的更简洁的方式。
<script>
function a() {
"special code hear"
}
</script>
<div onmousemove( 'a()')> </div>
onmousemove悬停元素时会调用事件，请查看W3 School 中的此示例。
要了解有关此事件的更多信息，Mozilla 文档涵盖了很多有关它的信息。
于 2020-05-19T02:29:14.187 回答