🏡 index : quine-global/electron-drag-click.git

<html>
  <head>
    <style>
      * {
        color: whitesmoke;
      }

      button, input {
        color: black;
      }

      .drag-container {
        -webkit-app-region: drag;
        background-color: cadetblue;

        padding: 40px;
        margin: 40px;
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <h1>draggability test</h1>

    <div class="drag-container">
      <h2>can be dragged</h2>

      <span>0</span> <br>

      <input type="text" placeholder="type..." />

      <button id="foo">cannot be clicked</button>

      <button id="dbl2">can be doubleclicked</button>
    </div>

    <input type="text" placeholder="type..." />

    <button id="bar">can be clicked</button>
    <button id="dbl">can be doubleclicked</button>

    <script>
      window.onload = () => {
        let counter = 0;

        const foo = document.getElementById('foo');
        const bar = document.getElementById('bar');
        const dbl = document.getElementById('dbl');
        const dbl2 = document.getElementById('dbl2');
        const span = document.querySelector('span');

        const inc = () => {
          span.innerText = ++counter
        };

        foo.addEventListener('click', inc);
        bar.addEventListener('click', inc);
        dbl.addEventListener('dblclick', inc);
        dbl2.addEventListener('dblclick', inc);
      }
    </script>
  </body>
</html>