playground/d3js-mouse-events.html at master · kiewic/playground · GitHub

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
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style>
      svg {
        background-color: #c1f75d;
      }
      textarea {
        width: 100%;
        min-height: 50%;
      }
    </style>
  </head>
  <body>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <h1>D3.js Mouse Events</h1>
    <p>
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="200px">
        <rect class="block" x="50" y="50" fill="#ff6347" width="100" height="100"/>
        <rect class="block" x="150" y="50" fill="#a8eaff" width="100" height="100"/>
      </svg>
    </p>
    <p>
        <textarea id="log"></textarea>
    </p>
    <p>
      <button id="clearButton">Clear</button>
    </p>
    <script>
      var d = document;
      var log = document.getElementById("log");

      // select both "block" elements
      var block = d3.selectAll(".block");

      block.on("touchstart", onDown);
      block.on("touchend", onDown);

      block.on("mousedown", onDown);
      block.on("mouseup", onDown);

      // fires when the user calls the context menu by right-clicking
      block.on("contextmenu", onDown);

      // fires when a mousedown and mouseup occur in the same element
      block.on("click", onDown);

      // fires when two mouse click events occur on the same element within a reasonable time
      block.on("dblclick", onDown);

      d3.select("body").on("keyup", onDown);
      d3.select("body").on("keydown", onDown);

      function onDown () {
        log.value += `${d3.event.type}, ctrlKey: ${d3.event.ctrlKey}, metaKey: ${d3.event.metaKey}\n`;
      }

      document.getElementById("clearButton").addEventListener("click", function () {
          log.value = "";
      });
    </script>
    <summary>
      <h2>Summary</h2>
      <ul>
        <li>Click event = MouseDown event + MouseUp event</li>
      </ul>
    </summary>
  </body>
</html>