Javascript鼠標事件不起作用

我試圖停止mouseout上的旗幟，但它不工作。一旦我mouseover它的作品，但一旦我鼠標mouseover行動循環它不停止。我可以知道我做了什麼錯誤嗎？Javascript鼠標事件不起作用

這是我的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); 

}

這是在華匯到在鼠標停止事件？在此先感謝

來源

2016-02-22 anonymous5671

如果你的意思是，你只是想防止默認的使用，AFAIK，它是！ – IsraGab

@nnnnnn我已經添加了動畫代碼請看看 – anonymous5671

對不起@nnnnnn這是我第一次寫java代碼。你能詳細解釋一下嗎 – anonymous5671

你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()照原樣。

來源

2016-02-22 06:00:13 nnnnnn

非常感謝它，它完美地爲我工作 – anonymous5671

不客氣。請不要複製/粘貼此代碼並忘記它：仔細閱讀我的解釋，並檢查所有代碼以瞭解其工作原理。 – nnnnnn

是的，我確信我會記住這一點 – anonymous5671

event.preventDefault()是停止事件的默認行爲發生的常用方法。此外，請嘗試e.stopPropagation()，以防您的事件在代碼中的其他任何地方冒泡。最後要嘗試的是從函數返回false。

但是，您可能需要顯示與drawBangladesh（）相關的代碼，因爲這可能是您的連續循環的原因，沒有它，我不能肯定地說你的問題是事件處理程序。

如果你沒有在事件處理過於熱衷，這MDN頁面可能會有幫助：https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/More_Event_Handlers#Prevent_Default_Action

來源

2016-02-22 05:33:21 Zach

什麼是mouseout事件的默認行爲？什麼會取消默認的鼠標行爲呢？ – nnnnnn

我已經添加了動畫代碼看看。實際上，一旦鼠標懸停在旗幟將揮舞，並在鼠標懸停後，國旗應該停止揮動 – anonymous5671

@nnnnnn那裏實際上沒有默認的動作，這就是爲什麼我想看到drawBangladesh（）代碼:) – Zach

Javascript鼠標事件不起作用

回答

相關問題