Question

我有这个代码，它应该在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);
}

计数器部分只有数字=数字8的变化;和数字＆gt; = 40; 问题是我有多个盒子，应该在鼠标悬停时点亮颜色变化，用鼠标输出点亮。当我慢慢地移动到我的盒子上时（大的没有）然后一切都很好但是当我快速移动时，一些盒子不会点亮......看起来如果我快速通过就不会发生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代码

Answer 1

通过在控制台中记录事件来检查事件是否正常启动：

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);
}

Answer 2

在您的代码中：

> function colinc(){
> 
>     var hexnum=number.toString(16);

标识符 number 尚未声明或初始化，因此您收到引用错误并且脚本失败。在上述行之前，您应该添加：

    var number = 0;

或者给数字一些其他值。

>     var hexcolor="#"+hexnum+hexnum+hexnum;
>     document.getElementById("c"+x).style.backgroundColor=hexcolor;
>     number=number+8;
>     if(number<=184)
>         setTimeout(colinc,50);

但是在这里您需要访问全局号，因此您可以在闭包中保留引用或使 number 全局。如果你要这样做，给它一个更好的名字，比如* 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();

请注意，由于函数表达式用于初始化函数，因此必须在之后调用它。

Answer 3

我已经解决了cleartimeout的问题。我根据它们的Id创建了两个数组来保存每个框的当前mouseover和mouseout setTimeout id。每次调用mouseout时，它首先从数组中清除相应的鼠标悬停，同样用于mouseout。

onmouseout没有正常射击

3 个答案: