File: boardevents.html

package info (click to toggle)
jsxgraph 1.3.5+dfsg1-2
  • links: PTS, VCS
  • area: main
  • in suites: bullseye, buster, sid
  • size: 26,044 kB
  • sloc: xml: 5,869; java: 1,072; python: 747; php: 192; makefile: 146; sh: 47
file content (97 lines) | stat: -rw-r--r-- 3,056 bytes parent folder | download | duplicates (2)
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>