Adding events: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
| (9 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 09: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);
