Javascript鼠标事件不起作用

Question

我试图停止mouseout上的旗帜，但它不工作。一旦我mouseover它的作品，但一旦我鼠标mouseover行动循环它不停止。我可以知道我做了什么错误吗？

这是我的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()照原样。

Answer 2

event.preventDefault()是停止事件的默认行为发生的常用方法。此外，请尝试e.stopPropagation()，以防您的事件在代码中的其他任何地方冒泡。最后要尝试的是从函数返回false。

但是，您可能需要显示与drawBangladesh（）相关的代码，因为这可能是您的连续循环的原因，没有它，我不能肯定地说你的问题是事件处理程序。

如果你没有在事件处理过于热衷，这MDN页面可能会有帮助：https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/More_Event_Handlers#Prevent_Default_Action