HTML and CSS Reference
In-Depth Information
Mouse Events
Becausewearegoingtocreateourownfunctionsforinteractivity betweenthemouseandour
First, we need to create a couple variables— mouseX and mouseY —that will hold the current x
and y locations of the mouse pointer:
var mouseX ;
var mouseY ;
Next we need to create the event handlers. First, we listen for the mouseup event. This event
fires when a user stops pressing the mouse button. We will listen for this event when we are
trying to determine whether we should stop dragging the volume slider:
theCanvas . addEventListener ( "mouseup" , eventMouseUp , false
false );
We also need to listen for the mousedown event to determine whether the play/pause button
was pressed, the loop on/off toggle button was pressed, and/or the volume slider was clicked,
so that we can start dragging it:
theCanvas . addEventListener ( "mousedown" , eventMouseDown , false
false );
Finally, we listen for the mousemove event so that we can figure out the current x and y loca-
tionsofthemousepointer.Weusethisvaluetodetermine whetherbuttonshavebeenpressed,
as well as whether the volume slider has been clicked and/or dragged:
theCanvas . addEventListener ( "mousemove" , eventMouseMove , false
false );
Search WWH ::

Custom Search