how do i stop draw refresh on mouseover?

I am drawing shapes on a custom element, and running a function on draw. for somereason it is constantly redrawing anytime I mouse over the shape how can I stop that?I am using cs6. here is a sample code with the issue that I am talking about was taken from a photoshop scripting forum but illustrtates my point. everytime you mouseover or mouseout the square it initiates the on draw but i only want it to redraw on the press of a button.

var winRes = "dialog {  \

    text: 'ScriptUI Graphics test',  \

    margins: 15, \

    alignChildren: 'row', \

    \

    canvas: Custom {  \

        preferredSize: [200, 200], \

        creation_properties: {borderStyle: 'black'} , \

    }, \

    buttonsGroup: Group{ \

        cancelButton: Button { text: 'Cancel', properties:{name:'cancel'} }, \

        tryButton: Button { text: 'Try', properties:{name:'try'},size: [40,24], alignment:['right', 'center'] }, \

          }, \

}"

// Window

var win = new Window(winRes);

function color() { return [Math.random(),Math.random(),Math.random(),1] }

// define the graphic property

canvasGraphics = win.canvas.graphics

// do the drawing

win.canvas.onDraw = redraw

function redraw() {

          // creates a red filled square

          canvasGraphics.newPath()

          canvasGraphics.rectPath(10, 10, 200, 200)

          canvasGraphics.fillPath(canvasGraphics.newBrush(canvasGraphics.BrushT ype.SOLID_COLOR, color(), 1)) // HERE

}

win.buttonsGroup.tryButton.onClick = function() {

      win.canvas.notify("onDraw")

}

win.show()