1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 18:07:34 +00:00

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.
This commit is contained in:
kleines Filmröllchen 2022-05-03 16:50:38 +02:00 committed by Linus Groh
parent a33b9a8bca
commit a7a5721149
2 changed files with 71 additions and 3 deletions

View file

@ -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>