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:
parent
a33b9a8bca
commit
a7a5721149
2 changed files with 71 additions and 3 deletions
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue