Javascript 鼠标悬停事件不起作用

Question

我试图在鼠标移开时停止旗波，但它不起作用。一旦我将鼠标悬停它就可以工作，但是一旦我将鼠标悬停，鼠标悬停操作就会循环它不会停止。我能知道我犯了什么错误吗？

这是我的js代码:

    elem.addEventListener("mouseout", mouseOut , false);

function mouseOut(event) {
    var mouseX,
        mouseY;
    event.preventDefault();  // stops browser to do what it normally does
    // determine where mouse is
    mouseX = event.pageX;
    mouseY = event.pageY;
    // do something useful, e.g. change the flag to waving when mouse is over flag
    clearBangladesh();  
}

function clearBangladesh(){
    canvas.clearRect(0,0,300, 150);
    drawBangladesh();

}

这是动画的代码:

function waveFlag( canvas, wavelength, amplitude, period, shading, squeeze ){
if (!squeeze)    squeeze    = 0;
if (!shading)    shading    = 100;
if (!period)     period     = 200;
if (!amplitude)  amplitude  = 10;
if (!wavelength) wavelength = canvas.width/10;

var fps = 30;
var ctx = canvas.getContext('2d');
var   w = canvas.width, h = canvas.height;
var  od = ctx.getImageData(0,0,w,h).data;
// var ct = 0, st=new Date;
return setInterval(function(){
    var id = ctx.getImageData(0,0,w,h);
    var  d = id.data;
    var now = (new Date)/period;
    for (var y=0;y<h;++y){
        var lastO=0,shade=0;
        var sq = (y-h/2)*squeeze;
        for (var x=0;x<w;++x){
            var px  = (y*w + x)*4;
            var pct = x/w;
            var o   = Math.sin(x/wavelength-now)*amplitude*pct;
            var y2  = y + (o+sq*pct)<<0;
            var opx = (y2*w + x)*4;
            shade = (o-lastO)*shading;
            d[px  ] = od[opx  ]+shade;
            d[px+1] = od[opx+1]+shade;
            d[px+2] = od[opx+2]+shade;
            d[px+3] = od[opx+3];
            lastO = o;
        }
    }
    ctx.putImageData(id,0,0);       
},1000/fps);
}

这是鼠标悬停功能:

function mouseMove(event) {
var elem = document.getElementById('bangladesh-canvas');
var mouseX,
    mouseY;
event.preventDefault();  // stops browser to do what it normally does
// determine where mouse is
mouseX = event.pageX;
mouseY = event.pageY;
// do something useful, e.g. change the flag to waving when mouse is over flag
waveFlag( elem, 50, 5, 200, 250, -0.1 );

}

这是在鼠标移出时停止事件的正确方法吗？提前致谢

Answer 1

您的waveFlag()动画函数通过调用setInterval()来工作，它将一些代码排队以定期运行永远 -除非您取消它或离开该页面。那么如何取消呢？它返回一个 id。您需要调用 clearInterval() 并传递该 id，这意味着您需要将 id 值实际存储在变量中，如下所示。

此外，您的 mouseover 和 mouseout 处理程序都有许多不必要的代码，这些代码不执行任何操作:您创建变量并分配值，但从不使用这些变量。并且不需要调用preventDefault()，因为这两个事件都没有需要取消的默认行为。所以，尝试这样的事情:

var intervalId;

function mouseMove(event) {
  var elem = document.getElementById('bangladesh-canvas');

  intervalId = waveFlag( elem, 50, 5, 200, 250, -0.1 );
}

function mouseOut(event) {
  clearInterval(intervalId);
  clearBangladesh();  
}

保持对 elem.addEventListener() 的现有调用不变。