1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97
|
<html>
<head>
<title>Board events</title>
<link rel="stylesheet" type="text/css" href="../distrib/jsxgraph.css" />
<script type="text/javascript" src="../src/loadjsxgraph.js"></script>
<script src="/usr/share/javascript/jquery/jquery.js"></script>
</head>
<body>
<div id="jquery" style="width:200px; height:200px; background-color:yellow"></div>
<div id="jxgbox" class="jxgbox" style="width:800px; height:800px; float:left"></div>
<div id="scroll" style="background-color:yellow; width: 100px; height: 100px; overflow: scroll">
Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>
</div>
<div id="out"></div>
<script type="text/javascript">
/* <![CDATA[ */
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-4, 6, 10, -4], axis: true, grid: false, keepaspectratio: true, showcopyright: false, zoom: true, pan: true}),
out = document.getElementById('out');
var p = board.create('point', [1, 2]);
var q = board.create('point', [3, 2]);
var l = board.create('line', [p, q]);
// test add/remove of internal event handlers
board.on('up', function (e) {
out.innerHTML += 'up ' + e + '<br/>';
});
board.on('down', function (e) {
out.innerHTML += 'down ' + e + '<br/>';
//e.preventDefault();
//e.stopPropagation();
});
board.on('hit', function (e, el, i) {
out.innerHTML += 'hit 1: ' + el.name + '<br />';
});
board.on('hit', function (e, el, i) {
out.innerHTML += 'hit 2: ' + el.name + '<br />';
});
board.off('hit');
var hithdlr = function (e, el, i) {
out.innerHTML += 'hit 3: ' + el.name + '<br />';
};
board.on('hit', hithdlr);
board.off('hit', hithdlr);
/*
board.on('hit', function (e, el, i) {
out.innerHTML += 'hit 4: ' + el.name + '<br />';
});
*/
// test add/remove native event handlers
/*
JXG.addEvent(board.containerObj, 'mousedown', function (e) {
out.innerHTML += 'mousedown 1<br />';
}, this);
JXG.removeAllEvents(board.containerObj, 'mousedown', this);
var mousedown2 = function (e) {
out.innerHTML += 'mousedown 2<br />';
};
JXG.addEvent(board.containerObj, 'mousedown', mousedown2, this);
JXG.addEvent(board.containerObj, 'mousedown', function (e) {
out.innerHTML += 'mousedown 3<br />';
}, this);
JXG.removeEvent(board.containerObj, 'mousedown', mousedown2, this);
*/
JXG.addEvent(document.getElementById('scroll'), 'scroll', function(e) {
out.innerHTML += 'scroll<br />';
}, this);
$('#jquery').on('mousedown', function(e) {
out.innerHTML += 'jdown ' + e.type + '<br/>';
});
//$('#jquery').on('mousemove', function(e) {
// out.innerHTML += 'jmove ' + e.type + '<br/>';
//});
$('#jquery').on('mouseup', function(e) {
out.innerHTML += 'jup ' + e.type + '<br/>';
});
/* ]]> */
</script>
</body>
</html>
|