alexsasharegan/change-events.html

## change-events.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Change Event</title>

    <style>
      body {
        margin: 5rem;
      }
      input {
        position: absolute;
        top: 0;
        left: -1000000px;
      }
    </style>
  </head>

  <body>
    <section>
      <h1>Change Event</h1>
      <p>
        There seems to be an inconsistency across browsers regarding firing the
        <code>onchange</code> event of an input when control-clicking
        (or whichever meta key is primary given the OS) the label.
      </p>
      <h2>Device specs:</h2>
      <ul>
        <li>
          Laptop:
          <a href="https://system76.com/laptops/oryx">System76 Oryx Pro</a>
        </li>
        <li>
          OS:
          <a href="https://system76.com/pop"
            >Pop!_OS <em>(an Ubuntu fork from System76)</em></a
          >
        </li>
      </ul>
    </section>

    <section>
      <h1>Example</h1>
      <label for="checkbox" id="checkbox-label">
        A thing to toggle.
        <input type="checkbox" name="boolean" id="checkbox" />
      </label>
    </section>

    <section><pre id="repl"></pre></section>

    <script>
      let repl = document.querySelector("#repl");
      let checkbox = document.querySelector("#checkbox");
      let label = document.querySelector("#checkbox-label");
      let buffer = (() => {
        let data = {
          onchange: {},
          onclick: {},
        };
        let flush = () => {
          repl.textContent = JSON.stringify(data, null, 2);
        };

        return {
          writeChange(x) {
            data.onchange = x;
            flush();
          },
          writeClick(x) {
            data.onclick = x;
            flush();
          },
        };
      })();

      checkbox.addEventListener("change", event => {
        buffer.writeChange({
          time: new Date().toISOString(),
          element: event.target.tagName,
        });
      });

      label.addEventListener("click", event => {
        buffer.writeClick({
          time: new Date().toISOString(),
          element: event.target.tagName,
          metaKeyInfo: {
            ctrlKey: event.ctrlKey,
            altKey: event.altKey,
            metaKey: event.metaKey,
          },
        });
      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Change Event</title>

	<style>
	body {
	margin: 5rem;
	}
	input {
	position: absolute;
	top: 0;
	left: -1000000px;
	}
	</style>
	</head>

	<body>
	<section>
	<h1>Change Event</h1>
	<p>
	There seems to be an inconsistency across browsers regarding firing the
	<code>onchange</code> event of an input when control-clicking
	(or whichever meta key is primary given the OS) the label.
	</p>
	<h2>Device specs:</h2>
	<ul>
	<li>
	Laptop:
	<a href="https://system76.com/laptops/oryx">System76 Oryx Pro</a>
	</li>
	<li>
	OS:
	<a href="https://system76.com/pop"
	>Pop!_OS <em>(an Ubuntu fork from System76)</em></a
	>
	</li>
	</ul>
	</section>

	<section>
	<h1>Example</h1>
	<label for="checkbox" id="checkbox-label">
	A thing to toggle.
	<input type="checkbox" name="boolean" id="checkbox" />
	</label>
	</section>

	<section><pre id="repl"></pre></section>

	<script>
	let repl = document.querySelector("#repl");
	let checkbox = document.querySelector("#checkbox");
	let label = document.querySelector("#checkbox-label");
	let buffer = (() => {
	let data = {
	onchange: {},
	onclick: {},
	};
	let flush = () => {
	repl.textContent = JSON.stringify(data, null, 2);
	};

	return {
	writeChange(x) {
	data.onchange = x;
	flush();
	},
	writeClick(x) {
	data.onclick = x;
	flush();
	},
	};
	})();

	checkbox.addEventListener("change", event => {
	buffer.writeChange({
	time: new Date().toISOString(),
	element: event.target.tagName,
	});
	});

	label.addEventListener("click", event => {
	buffer.writeClick({
	time: new Date().toISOString(),
	element: event.target.tagName,
	metaKeyInfo: {
	ctrlKey: event.ctrlKey,
	altKey: event.altKey,
	metaKey: event.metaKey,
	},
	});
	});
	</script>
	</body>
	</html>