mirror of
https://github.com/SerenityOS/serenity
synced 2024-07-21 18:15:58 +00:00
a7a5721149
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.
49 lines
1.9 KiB
HTML
49 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
alert("It loaded!");
|
|
|
|
document.getElementById("my_div").addEventListener("mousedown", function() {
|
|
alert("Mouse down!");
|
|
});
|
|
document.getElementById("my_div").addEventListener("mousemove", function() {
|
|
alert("Mouse move!");
|
|
});
|
|
});
|
|
</script>
|
|
</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>
|