CODEWITHSUNDEEP
javascript
anonymous5671
anonymous5671

Reputation: 331

Javascript mouseout event not working

I am trying to stop the flagwave on mouseout but its not working. Once i mouseover it works but once i mouseout the mouseover action is looping its not stopping. Can i know whats the mistake i have done.

This is my js code:

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

}

THis is the code for the animation:

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

This is the mouseover function:

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

}

Is this the rightway to stop an event on mouse out? Thanks in advance

Upvotes: 0

Views: 166

Answers (2)

nnnnnn
nnnnnn

Reputation: 150030

Your waveFlag() animation function works by calling setInterval(), which queues up some code to be run at regular intervals forever - unless you cancel it or navigate away from the page. So how to cancel it? It returns an id. You need to call clearInterval() and pass that id, which means you need to actually store the id value in a variable as shown below.

Also, both your mouseover and mouseout handlers have a lot of unnecessary code that doesn't do anything: you create variables and assign values but never use those variables. And there is no need to call preventDefault() because neither event has default behaviour that needs cancelling. So, try something like this:

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

Keep your existing calls to elem.addEventListener() as they are.

Upvotes: 1

Zach
Zach

Reputation: 5073

event.preventDefault() is the common way to stop an event's default behavior from occurring. Also, try e.stopPropagation(), in case your event is bubbling up anywhere else in your code. The final thing to attempt is returning false from the function.

However, you might need to show code related to drawBangladesh(), as that may be the cause of your continuous looping, and without it I can't say for certain that your issue is the event handler.

If you're not too keen on event handling, this MDN page may help: https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/More_Event_Handlers#Prevent_Default_Action

Upvotes: 0

Related Questions