click-event-on-input-control-associated-with-label-element.html 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <style>
  4. * {
  5. margin: 0;
  6. }
  7. .box {
  8. display: inline-block;
  9. width: 100px;
  10. height: 100px;
  11. background-color: purple;
  12. }
  13. input {
  14. display: none;
  15. }
  16. label {
  17. display: block;
  18. width: 200px;
  19. height: 200px;
  20. border: 1px solid black;
  21. }
  22. </style>
  23. <script src="../include.js"></script>
  24. <body>
  25. <form>
  26. <label>
  27. <input type="radio" name="fruit" value="apple" id="radio1">
  28. <span class="box"></span>
  29. </label>
  30. <label>
  31. <input type="radio" name="fruit" value="banana" id="radio2">
  32. hey
  33. </label>
  34. </form>
  35. </body>
  36. <script>
  37. asyncTest(done => {
  38. let eventCount = 0;
  39. function endTestIfGotAllEvents() {
  40. eventCount++;
  41. if (eventCount == 4) {
  42. done();
  43. }
  44. }
  45. document.querySelectorAll('input').forEach(function (element) {
  46. element.addEventListener('click', function (event) {
  47. println(`click event on input#${event.target.id}`);
  48. endTestIfGotAllEvents();
  49. });
  50. element.addEventListener('mouseup', function (event) {
  51. println(`mouseup event on input#${event.target.id}`);
  52. endTestIfGotAllEvents();
  53. });
  54. });
  55. document.querySelectorAll('.box').forEach(function (element) {
  56. element.addEventListener('click', function (event) {
  57. println('click event on box');
  58. endTestIfGotAllEvents();
  59. });
  60. element.addEventListener('mouseup', function (event) {
  61. println('mouseup event on box');
  62. endTestIfGotAllEvents();
  63. });
  64. });
  65. internals.click(50, 50);
  66. internals.click(50, 250);
  67. });
  68. </script>
  69. </html>