Add generic DOM events to JSXGraph elements
*Please note:* Adding generic DOM events works only if SVG renderer is used. Nearly all JSXGraph elements have a subobject `rendNode` which is a pointer to its SVG element in the DOM. This element can be supplied with event listeners.
<p id="myOutput"> </p>
// Define the id of your board in BOARDID
const board = JXG.JSXGraph.initBoard(BOARDID, {
boundingbox: [-4, 4, 4, -4],
keepaspectratio: true
});
var p = board.create('point', [1, 1], {
size: 5
});
JXG.addEvent(p.rendNode, 'mouseover',
function() {
document.getElementById('myOutput').innerHTML = "Point " + this.name;
},
p);
JXG.addEvent(p.rendNode, 'mouseout',
function() {
document.getElementById('myOutput').innerHTML = ' ';
},
p);
// User can not move "A" anymore.
p.hasPoint = function() {
return false;
};
var p2 = board.create('point', [-1, 1], {
size: 5
});
JXG.addEvent(p2.rendNode, 'mouseover',
function() {
document.getElementById('myOutput').innerHTML = "Point " + this.name;
},
p2);
JXG.addEvent(p2.rendNode, 'mouseout',
function() {
document.getElementById('myOutput').innerHTML = ' ';
},
p2);
This example is licensed under a Creative Commons Attribution 4.0 International License.
Please note that you have to mention The Center of Mobile Learning with Digital Technology in the credits.