mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-10-25 01:19:45 +00:00
c0e90a2a68
For example, in the following HTML:
```html
<label>
<input type="radio" name="fruit" value="apple" id="radio1">
<span class="box"></span>
</label>
```
When any descendant of a <label> element is clicked, a "click" event
must be dispatched on the <input> element nested within the <label>, in
addition to the "click" event dispatched on the clicked descendant.
Previously, this behavior was implemented only for text node descendants
by "overriding" the mouse event target using `mouse_event_target()` in
the TextPaintable. This approach was incorrect because it was limited to
text nodes, whereas the behavior should apply to any box. Moreover, the
"click" event for the input control must be dispatched *in addition* to
the event on the clicked element, rather than redirecting it.
75 lines
1.9 KiB
HTML
75 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
}
|
|
|
|
.box {
|
|
display: inline-block;
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: purple;
|
|
}
|
|
|
|
input {
|
|
display: none;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
width: 200px;
|
|
height: 200px;
|
|
border: 1px solid black;
|
|
}
|
|
</style>
|
|
<script src="../include.js"></script>
|
|
<body>
|
|
<form>
|
|
<label>
|
|
<input type="radio" name="fruit" value="apple" id="radio1">
|
|
<span class="box"></span>
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="fruit" value="banana" id="radio2">
|
|
hey
|
|
</label>
|
|
</form>
|
|
</body>
|
|
<script>
|
|
asyncTest(done => {
|
|
let eventCount = 0;
|
|
function endTestIfGotAllEvents() {
|
|
eventCount++;
|
|
if (eventCount == 4) {
|
|
done();
|
|
}
|
|
}
|
|
|
|
document.querySelectorAll('input').forEach(function (element) {
|
|
element.addEventListener('click', function (event) {
|
|
println(`click event on input#${event.target.id}`);
|
|
endTestIfGotAllEvents();
|
|
});
|
|
element.addEventListener('mouseup', function (event) {
|
|
println(`mouseup event on input#${event.target.id}`);
|
|
endTestIfGotAllEvents();
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll('.box').forEach(function (element) {
|
|
element.addEventListener('click', function (event) {
|
|
println('click event on box');
|
|
endTestIfGotAllEvents();
|
|
});
|
|
element.addEventListener('mouseup', function (event) {
|
|
println('mouseup event on box');
|
|
endTestIfGotAllEvents();
|
|
});
|
|
});
|
|
|
|
internals.click(50, 50);
|
|
internals.click(50, 250);
|
|
});
|
|
</script>
|
|
</html>
|