Difference between revisions of "Adding events 2"

From JSXGraph Wiki
Jump to: navigation, search
(Created page with "Please note: This only works when the SVG or VML renderer is used. With the Canvas renderer the rendNode property is undefined. <html> <p id="myOutput"> </p> </html> <jsxgra...")
 
 
(4 intermediate revisions by 2 users not shown)
Line 1: Line 1:
Please note: This only works when the SVG or VML renderer is used. With the Canvas renderer the rendNode property is undefined.
+
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":
 +
<source lang="javascript">
 +
  var p = board.create('point',[1,1]);
 +
  p.on('update', function(e, i){ /* do something ... */);
 +
</source>
 +
The possible events  are
 +
* update
 +
* drag, mousedrag, touchdrag
 +
* move, mousemove, touchmove
 +
* over, mouseover
 +
* out, mouseout
 +
* up, mouseup, touchend
 +
* down, mousedown, touchstart
 +
 
 
<html>
 
<html>
 
<p id="myOutput">&nbsp;</p>
 
<p id="myOutput">&nbsp;</p>
Line 6: Line 22:
 
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-4,4,4,-4], keepaspectratio:true});
 
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-4,4,4,-4], keepaspectratio:true});
 
var myPoint = brd.create('point',[1,1], {size:5, fixed: true});
 
var myPoint = brd.create('point',[1,1], {size:5, fixed: true});
myPoint.on('over', function(){
+
myPoint.on('over', function(e){
 
     document.getElementById('myOutput').innerHTML = "Point "+this.name;
 
     document.getElementById('myOutput').innerHTML = "Point "+this.name;
 
});
 
});
myPoint.on('out', function(){
+
myPoint.on('out', function(e){
 
     document.getElementById('myOutput').innerHTML = '&nbsp;';
 
     document.getElementById('myOutput').innerHTML = '&nbsp;';
 
});
 
});
  
 
var myPoint2 = brd.create('point',[-1,1], {size:5});
 
var myPoint2 = brd.create('point',[-1,1], {size:5});
myPoint2.on('over', function(){
+
myPoint2.on('over', function(e){
 
     document.getElementById('myOutput').innerHTML = "Point "+this.name;
 
     document.getElementById('myOutput').innerHTML = "Point "+this.name;
 
});
 
});
myPoint2.on('out', function(){
+
myPoint2.on('out', function(e){
 
     document.getElementById('myOutput').innerHTML = '&nbsp;';
 
     document.getElementById('myOutput').innerHTML = '&nbsp;';
 
});
 
});
Line 29: Line 45:
 
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-4,4,4,-4], keepaspectratio:true});
 
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-4,4,4,-4], keepaspectratio:true});
 
var myPoint = brd.create('point',[1,1], {size:5, fixed: true});
 
var myPoint = brd.create('point',[1,1], {size:5, fixed: true});
myPoint.on('over', function(){
+
myPoint.on('over', function(e){
 
     document.getElementById('myOutput').innerHTML = "Point "+this.name;
 
     document.getElementById('myOutput').innerHTML = "Point "+this.name;
 
});
 
});
myPoint.on('out', function(){
+
myPoint.on('out', function(e){
 
     document.getElementById('myOutput').innerHTML = '&nbsp;';
 
     document.getElementById('myOutput').innerHTML = '&nbsp;';
 
});
 
});
  
 
var myPoint2 = brd.create('point',[-1,1], {size:5});
 
var myPoint2 = brd.create('point',[-1,1], {size:5});
myPoint2.on('over', function(){
+
myPoint2.on('over', function(e){
 
     document.getElementById('myOutput').innerHTML = "Point "+this.name;
 
     document.getElementById('myOutput').innerHTML = "Point "+this.name;
 
});
 
});
myPoint2.on('out', function(){
+
myPoint2.on('out', function(e){
 
     document.getElementById('myOutput').innerHTML = '&nbsp;';
 
     document.getElementById('myOutput').innerHTML = '&nbsp;';
 
});</source>
 
});</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]

Latest revision as of 22:33, 1 July 2019

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

  • update
  • 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 "+this.name;
});
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 "+this.name;
});
myPoint2.on('out', function(e){
    document.getElementById('myOutput').innerHTML = '&nbsp;';
});