Adding events 2

From JSXGraph Wiki
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

It is possible to supply user-defined defined functions for certain events. The user-defined functions are called additionally to the default JSXGraph events. For the events "down" and "up" the user-supplied event handlers are called before the default JSXGraph event handler. For the event "update" the user-supplied handler is called after the default JSXGraph event handler which is an update of the board.

A user-supplied event handler can be defined by the method "on":

   var p = board.create('point',[1,1]);
   p.on('update', function(e, i){ /* do something ... */);

The possible events are

  • drag, mousedrag, touchdrag
  • move, mousemove, touchmove
  • over, mouseover
  • out, mouseout
  • up, mouseup, touchend
  • down, mousedown, touchstart


<p id="myOutput">&nbsp;</p>
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-4,4,4,-4], keepaspectratio:true});
var myPoint = brd.create('point',[1,1], {size:5, fixed: true});
myPoint.on('over', function(e){
    document.getElementById('myOutput').innerHTML = "Point ";
myPoint.on('out', function(e){
    document.getElementById('myOutput').innerHTML = '&nbsp;';

var myPoint2 = brd.create('point',[-1,1], {size:5});
myPoint2.on('over', function(e){
    document.getElementById('myOutput').innerHTML = "Point ";
myPoint2.on('out', function(e){
    document.getElementById('myOutput').innerHTML = '&nbsp;';