diff options
| author | kleines Filmröllchen <filmroellchen@serenityos.org> | 2022-05-03 16:50:38 +0200 |
|---|---|---|
| committer | Linus Groh <mail@linusgroh.de> | 2022-06-05 22:31:06 +0100 |
| commit | a7a5721149427352845bc0a020f625da9bb02a78 (patch) | |
| tree | 066d9509f2dbd7de4b0d7d61842d1e9ec46d43d0 /Base/res/html/misc/events.html | |
| parent | a33b9a8bca838df09dc945be536624ecf0e66392 (diff) | |
| download | serenity-a7a5721149427352845bc0a020f625da9bb02a78.zip | |
LibWeb: Dispatch mouse events to topmost element instead of hit target
This improves our spec compliance by allowing the user to click
non-element nodes (like text) and having the click be registered with
the parent element (like a div or button). This makes Fandom's cookie
accept button work if you click the text. Additionally, the events test
page contains a test to check the target element, which would previously
not exist when we fired the event at a non-element.
Diffstat (limited to 'Base/res/html/misc/events.html')
| -rw-r--r-- | Base/res/html/misc/events.html | 28 |
1 files changed, 28 insertions, 0 deletions
diff --git a/Base/res/html/misc/events.html b/Base/res/html/misc/events.html index 47754874a0..d26f8d5245 100644 --- a/Base/res/html/misc/events.html +++ b/Base/res/html/misc/events.html @@ -16,5 +16,33 @@ </head> <body> <div id="my_div">Hello there!</div> + + <div style="border: 1px solid black; width: 500px; height: 200px" id="divel"> + CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK + ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME + CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME + </div> + <p id="result">This text should be green, whether you click on the div border or the div text.</p> + <p> + <script> + const divel = document.getElementById("divel"); + const result = document.getElementById("result"); + divel.addEventListener("click", event => { + try { + const text = `Result: Clicked on divel element with id ${event.target.getAttribute( + "id" + )}`; + console.log(text); + result.innerText = text; + result.style.setProperty("color", "green"); + } catch (e) { + const text = `Result: ${e.message}`; + console.error(text); + result.innerText = text; + result.style.setProperty("color", "red"); + } + }); + </script> + </p> </body> </html> |