Raphaël Reference: Events

Execute Function at Start of Click or Touch

• Elements: all
• Notes: Adds a handler to execute a function when click begins on element
• Parameters: handler
• Usage: element.mousedown( handler ), element.touchstart( handler )
• Example: Tapping the rabbit will scale him to a random size

  var paper = new Raphael(document.getElementById('my_container'), 200, 200);
  var r1 = paper.image( "rabbit.png", 20, 20, 110, 150 )					
  r1.mousedown( function() { this.attr({ 'transform': 's'+Math.random() }) } )
  

Execute Function at End of Click or Touch

• Elements: all
• Notes: Adds a handler to execute a function when mouse is released, when click begins and ends on element
• Parameters: handler
• Usage: element.click( handler ) or element.touchend( handler )
• Example: Tapping the rabbit will scale him to a random size

  var paper = new Raphael(document.getElementById('my_container'), 200, 200);
  var r1 = paper.image( "rabbit.png", 20, 20, 110, 150 )					
  r1.click( function() { this.attr({ 'transform': 's'+Math.random() }) } )
  

Execute Function at End of Click or Touch

• Elements: all
• Notes: Adds a handler to execute a function when mouse is released, when click begins on element and ends anywhere
• Parameters: handler
• Usage: element.mouseup( handler ) or element.touchend( handler )
• Example: Clicking and releasing the rabbit will scale him to a random size

  var paper = new Raphael(document.getElementById('my_container'), 200, 200);
  var r1 = paper.image( "rabbit.png", 20, 20, 110, 150 )					
  r1.mouseup( function() { this.attr({ 'transform': 's'+Math.random() }) } )
  

Execute Function On Double Click

• Elements: all
• Notes: Adds a handler that triggers once when two rapid clicks are detected over an element
• Parameters: handler
• Usage: element.dblclick( handler )

Execute Function On Mouse Over

• Elements: all
• Notes: Adds a handler that triggers once when mouse moves over element
• Parameters: handler
• Usage: element.mouseover( handler )
• Example: Move your mouse over the square to change the color.

  var paper = new Raphael(document.getElementById('my_container'), 200, 200);
  var ms = paper.rect( 20, 20, 110, 110, 3 ).attr({ 'fill': 'blue' })				
  ms.mouseover( function() { this.attr({ 'fill': Raphael.getColor() }) } )
  

Execute Function On Mouse Out

• Elements: all
• Notes: Adds a handler that triggers once when mouse moves out of element's area
• Parameters: handler
• Usage: element.mouseout( handler )

Execute Function Continuously On Mouse or Touch Move

• Elements: all
• Notes: Adds a handler that triggers continuously when mouse moves over element
• Parameters: handler
• Usage: element.mousemove( handler ) or element.touchmove( handler )
• Example: Move your mouse over the square to change the color.

  var paper = new Raphael(document.getElementById('my_container'), 200, 200);
  var ms = paper.rect( 20, 20, 110, 110, 3 ).attr({ 'fill': 'blue' })				
  ms.mousemove( function() { this.attr({ 'fill': Raphael.getColor() }) } )
  

Execute Functions on Hover

• Elements: all
• Notes: Adds handlers for mouse over and mouse out in a single method
• Parameters: hover in handler, hover out handler
• Usage: element.hover( hover in handler, hover out handler )
• Example: Hover over the circle to execute the hoverstart function; the hoverend function executes on mouseout.

  var paper = new Raphael(document.getElementById('my_container'), 150, 150);
  var bg = paper.rect( 0,0,150,150 ).attr({ 'fill': 'white' })
  var bc = paper.circle( 75,75,50 ).attr({ 'fill': '#ffffcc', 'stroke-width':0 })
  var bcglow = bc.glow({ 'width': 40, 'color':'yellow'})
  bcglow.hide()
  
  function hoverstart() {
  	bg.animate({'fill':'blue'},500)	
  	bc.animate({'fill':'yellow'},500)
  	bcglow.show()	
  	}				
  	
  function hoverend() {
  	bg.attr({ 'fill': 'white' })	
  	bc.attr({ 'fill': '#ffffcc' })
  	bcglow.hide()	
  	}
  	
  bc.hover( hoverstart, hoverend )
  

• Elements: all
• Notes: Adds three handlers for beginning of drag, moving, and end of drag. Move handler must update location for drag effect.
• Parameters: move handler, start handler, end handler
• Usage: element.drag( move handler, start handler, end handler )
• Example: The circle below can be dragged around the canvas. When the drag begins, the circle will expand and turn pink.

  var paper = new Raphael(document.getElementById('drag'), 700, 200);
  var dragC = paper.circle( 20,20,20 ).attr({ 'fill': 'white' })
  
  function dragStart() {
  	// Get original position of element, and set as properties .ox and .oy
  	dragC.ox = dragC.attr("cx");
  	dragC.oy = dragC.attr("cy");
  	dragC.animate({ 'transform': 's2', 'fill': 'pink', 'opacity': 0.9 }, 200 )	
  	}				
  	
  function dragMove( dx, dy ) {
  	dragC.attr({ 'transform': 's1.6', 'fill': 'pink', 'opacity': 0.8, 'cx': dragC.ox+dx, 'cy': dragC.oy+dy  })		
  	}
  	
  function dragEnd() {
  	dragC.animate({ 'transform': 's1', 'fill': 'white', 'opacity': 1 }, 500)		
  	}
  	
  dragC.drag( dragMove, dragStart, dragEnd )
  

• Elements: all
• Notes: Remove a particular handler for an event
• Parameters: event type and handler
• Usage: element.unclick( handler ), element.unmousedown( handler ), element.unmousemove( handler ), element.unmouseout( handler ), element.unmouseover( handler ), element.unmouseup( handler ), element.undblclick( handler ), element.untouchmove( handler ), element.untouchstart( handler ), element.untouchend( handler ), element.untouchcancel( handler ), element.unhover( start handler, end handler ), element.undrag()