onmouseout未正确触发
onmouseout未正确触发
提问于 2012-09-10 20:48:57
我有这个代码，它应该在mouseover上触发，而它的对应代码在onmouseout上执行相反的操作：
colinc();
function colinc(){
var hexnum=number.toString(16);
var hexcolor="#"+hexnum+hexnum+hexnum;
document.getElementById("c"+x).style.backgroundColor=hexcolor;
number=number+8;
if(number<=184)
setTimeout(colinc,50);
}计数器部分只有number =number-8和number>=40；的更改，问题是我有多个框，它们应该在鼠标悬停时颜色变化时亮起，而在鼠标移出时亮起。当我在我的盒子上慢慢移动时(大号)然后一切正常，但是当我快速移动时，一些盒子不亮，如果我过得很快，down...it看起来不会发生onmouseout。有什么帮助吗？
function flash(x){
number=0;
var cc = document.getElementById("c"+x);
var cs=document.defaultView.getComputedStyle(cc,null);
var bg=cs.getPropertyValue('background-color');
var str=""+bg;
var n=str.replace("rgb","");
n=n.replace("(","");
n=n.replace(")","");
var arr=n.split(",");
number=parseInt(arr[0]);
colinc();
function colinc(){
var hexnum=number.toString(16);
var hexcolor="#"+hexnum+hexnum+hexnum;
document.getElementById("c"+x).style.backgroundColor=hexcolor;
number=number+8;
if(number<=184)
setTimeout(colinc,50);
}
}
function flashe(x){
number=0;
var cc = document.getElementById("c"+x);
var cs=document.defaultView.getComputedStyle(cc,null);
var bg=cs.getPropertyValue('background-color');
var str=""+bg;
var n=str.replace("rgb","");
n=n.replace("(","");
n=n.replace(")","");
var arr=n.split(",");
number=parseInt(arr[0]);
colinc();
function colinc(){
var hexnum=number.toString(16);
var hexcolor="#"+hexnum+hexnum+hexnum;
document.getElementById("c"+x).style.backgroundColor=hexcolor;
number=number-8;
if(number>=40)
setTimeout(colinc,40);
}}
这是我完整的js代码。
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-09-10 20:56:22
通过在控制台中记录事件来检查事件是否正常触发：
function MouseOverHandler(event) {
console.log('mouseover');
}
function MouseOutHandler(event) {
console.log('mouseout');
}另外，当相反的事件发生时，您是否会停止任何一个处理程序的执行。这将通过获取超时id并取消它来完成。
var mouseOverTimeout, mouseOutTimeout;
function colinc(){
clearTimeout(mouseOutTimeout);
mouseOverTimeout = setTimeout(colinc,50);
}
function MouseOutHandler(event) {
clearTimeout(mouseOverTimeout);
mouseOutTimeout = setTimeout(MouseOutHandler,50);
}Stack Overflow用户
发布于 2012-09-10 20:58:49
在你的代码中：
> function colinc(){
>
> var hexnum=number.toString(16);标识符号尚未声明或初始化，因此您会得到一个引用错误，并且脚本将失败。在上面的代码行之前，您可能应该添加：
var number = 0;或者赋予数字一些其他的值。
> var hexcolor="#"+hexnum+hexnum+hexnum;
> document.getElementById("c"+x).style.backgroundColor=hexcolor;
> number=number+8;
> if(number<=184)
> setTimeout(colinc,50); 但在这里，您需要访问全局编号，因此您可以在闭包中保留引用或使编号成为全局编号。如果你打算这样做，给它起一个更好的名字，比如*colnic_counter*，或者不太可能与其他全局变量冲突的名称。
> }类似于：
var colinc = (function() {
var num = 0;
return function() {
var hexnum = num.toString(16);
var hexcolor = "#" + hexnum + hexnum + hexnum;
// document.getElementById("c"+x).style.backgroundColor=hexcolor;
console.log(hexcolor);
num += 8;
if (num <= 184)
setTimeout(colinc,50);
}
}());
colinc();请注意，由于函数表达式用于初始化函数，因此您必须在之后调用它。
Stack Overflow用户
发布于 2012-09-10 22:49:08
我已经解决了清除的问题。我创建了两个数组来保存每个盒子的当前mouseover和mouseout setTimeout Id。每次调用mouseout时，它首先从数组中清除相应的mouseover，对mouseout也是如此。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12352069
复制相关文章
相似问题
腾讯云开发者
