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

LibWeb: Dispatch mouse events to topmost element instead of hit target

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

28
Base/res/html/misc/events.html
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>