Adding events: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(8 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">&nbsp;</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 = '&nbsp;';},
            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 = '&nbsp;';},
            myPoint2);
</jsxgraph>
<source lang="html4strict">
<p id="myOutput">&nbsp;</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 = '&nbsp;';},  
             myPoint);
             myPoint);
myPoint.hasPoint = function(){return false; };
myPoint.hasPoint = function(){return false; }; // User can not move "A" anymore.


</jsxgraph>
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 = '&nbsp;';},
            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">&nbsp;</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 = '&nbsp;';}, 
             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 = '&nbsp;';}, 
             myPoint2);