Difference between revisions of "Adding events"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) |
||
| (10 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. | ||
| + | The JSXGraph event handling system works with Canvas, too: [[Adding events 2]]. | ||
<html> | <html> | ||
| − | <p id="myOutput"></p> | + | <p id="myOutput"> </p> |
</html> | </html> | ||
<jsxgraph width="400" height="400"> | <jsxgraph width="400" height="400"> | ||
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}); | var myPoint = brd.create('point',[1,1], {size:5}); | ||
| + | JXG.addEvent(myPoint.rendNode, 'mouseover', | ||
| + | function(){ document.getElementById('myOutput').innerHTML = "Point "+this.name;}, | ||
| + | myPoint); | ||
| + | JXG.addEvent(myPoint.rendNode, 'mouseout', | ||
| + | function(){document.getElementById('myOutput').innerHTML = ' ';}, | ||
| + | myPoint); | ||
| + | myPoint.hasPoint = function(){return false; }; // User can not move "A" anymore. | ||
| + | var myPoint2 = brd.create('point',[-1,1], {size:5}); | ||
| + | JXG.addEvent(myPoint2.rendNode, 'mouseover', | ||
| + | function(){ document.getElementById('myOutput').innerHTML = "Point "+this.name;}, | ||
| + | myPoint2); | ||
| + | JXG.addEvent(myPoint2.rendNode, 'mouseout', | ||
| + | function(){document.getElementById('myOutput').innerHTML = ' ';}, | ||
| + | myPoint2); | ||
| + | </jsxgraph> | ||
| + | |||
| + | <source lang="html4strict"> | ||
| + | <p id="myOutput"> </p> | ||
| + | </source> | ||
| + | |||
| + | <source lang="javascript"> | ||
| + | var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-4,4,4,-4], keepaspectratio:true}); | ||
| + | var myPoint = brd.create('point',[1,1], {size:5}); | ||
JXG.addEvent(myPoint.rendNode, 'mouseover', | JXG.addEvent(myPoint.rendNode, 'mouseover', | ||
function(){ document.getElementById('myOutput').innerHTML = "Point "+this.name;}, | function(){ document.getElementById('myOutput').innerHTML = "Point "+this.name;}, | ||
myPoint); | myPoint); | ||
JXG.addEvent(myPoint.rendNode, 'mouseout', | JXG.addEvent(myPoint.rendNode, 'mouseout', | ||
| − | function(){document.getElementById('myOutput').innerHTML =}, | + | function(){document.getElementById('myOutput').innerHTML = ' ';}, |
myPoint); | myPoint); | ||
| − | + | myPoint.hasPoint = function(){return false; }; // User can not move "A" anymore. | |
| − | </ | + | var myPoint2 = brd.create('point',[-1,1], {size:5}); |
| + | JXG.addEvent(myPoint2.rendNode, 'mouseover', | ||
| + | function(){ document.getElementById('myOutput').innerHTML = "Point "+this.name;}, | ||
| + | myPoint2); | ||
| + | JXG.addEvent(myPoint2.rendNode, 'mouseout', | ||
| + | function(){document.getElementById('myOutput').innerHTML = ' ';}, | ||
| + | myPoint2); | ||
| + | </source> | ||
[[Category:Examples]] | [[Category:Examples]] | ||
Latest revision as of 11:13, 30 September 2016
Please note: This only works when the SVG or VML renderer is used. With the Canvas renderer the rendNode property is undefined. The JSXGraph event handling system works with Canvas, too: Adding events 2.
<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});
JXG.addEvent(myPoint.rendNode, 'mouseover',
function(){ document.getElementById('myOutput').innerHTML = "Point "+this.name;},
myPoint);
JXG.addEvent(myPoint.rendNode, 'mouseout',
function(){document.getElementById('myOutput').innerHTML = ' ';},
myPoint);
myPoint.hasPoint = function(){return false; }; // User can not move "A" anymore.
var myPoint2 = brd.create('point',[-1,1], {size:5});
JXG.addEvent(myPoint2.rendNode, 'mouseover',
function(){ document.getElementById('myOutput').innerHTML = "Point "+this.name;},
myPoint2);
JXG.addEvent(myPoint2.rendNode, 'mouseout',
function(){document.getElementById('myOutput').innerHTML = ' ';},
myPoint2);
