Question

我试图在mouseout上停止flagwave，但它不起作用。一旦我鼠标悬停它工作，但一旦我mouseout鼠标悬停操作循环它不停止。我能否知道我所犯的错误。

这是我的js代码：

debug.traceback

这是动画的代码：

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

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

Answer 1

您的waveFlag()动画功能通过调用setInterval()来运行，clearInterval()会将某些代码排队等待永久 - 除非您取消它或离开页面。那么如何取消呢？它返回一个id。您需要调用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(); }并传递该ID，这意味着您需要将id值实际存储在变量中，如下所示。

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

elem.addEventListener()

保持现有的const T&来电。

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

Javascript mouseout事件无法正常工作

2 个答案: