Adding events 2: Difference between revisions
From JSXGraph Wiki
(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...") |
A WASSERMANN (talk | contribs) No edit summary |
||
(5 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
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 | |||
* drag, mousedrag, touchdrag | |||
* move, mousemove, touchmove | |||
* over, mouseover | |||
* out, mouseout | |||
* up, mouseup, touchend | |||
* down, mousedown, touchstart | |||
<html> | <html> | ||
<p id="myOutput"> </p> | <p id="myOutput"> </p> | ||
Line 6: | Line 21: | ||
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 = ' '; | document.getElementById('myOutput').innerHTML = ' '; | ||
}); | }); | ||
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 = ' '; | document.getElementById('myOutput').innerHTML = ' '; | ||
}); | }); | ||
Line 29: | Line 44: | ||
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 = ' '; | document.getElementById('myOutput').innerHTML = ' '; | ||
}); | }); | ||
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 = ' '; | document.getElementById('myOutput').innerHTML = ' '; | ||
});</source> | });</source> | ||
[[Category:Examples]] | [[Category:Examples]] |
Latest revision as of 15:15, 24 March 2020
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"> </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 = ' ';
});
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 = ' ';
});