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>
|
