mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-27 10:07:15 +02:00
a6d6729034
This returns the secondary target of a mouse event. For `onmouseenter` and `onmouseover` events, this is the EventTarget the mouse exited from. For `onmouseleave` and `onmouseout` events, this is the EventTarget the mouse entered to.
68 lines
1.9 KiB
HTML
68 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<style>
|
|
body {
|
|
margin: 0px;
|
|
padding: 5px;
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
|
|
#outer {
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: yellowgreen;
|
|
}
|
|
|
|
#inner {
|
|
width: 50px;
|
|
height: 50px;
|
|
background-color: magenta;
|
|
}
|
|
</style>
|
|
<body id="body"><div id="outer"><div id="inner"></div></div></body>
|
|
<script src="../include.js"></script>
|
|
<script>
|
|
function handleMouseOver(e) {
|
|
println(`mouseover target.id=(${e.target.id}) currentTarget.id=(${e.currentTarget.id}), relatedTarget.id=(${e.relatedTarget.id})`);
|
|
}
|
|
function handleMouseOut(e) {
|
|
println(`mouseout target.id=(${e.target.id}) currentTarget.id=(${e.currentTarget.id}), relatedTarget.id=(${e.relatedTarget.id})`);
|
|
}
|
|
function handleMouseEnter(e) {
|
|
println(`mouseenter target.id=(${e.target.id}) currentTarget.id=(${e.currentTarget.id}), relatedTarget.id=(${e.relatedTarget.id})`);
|
|
}
|
|
function handleMouseLeave(e) {
|
|
println(`mouseleave target.id=(${e.target.id}) currentTarget.id=(${e.currentTarget.id}), relatedTarget.id=(${e.relatedTarget.id})`);
|
|
}
|
|
|
|
|
|
outer.onmouseover = handleMouseOver;
|
|
outer.onmouseout = handleMouseOut;
|
|
outer.onmouseenter = handleMouseEnter;
|
|
outer.onmouseleave = handleMouseLeave;
|
|
|
|
inner.onmouseover = handleMouseOver;
|
|
inner.onmouseout = handleMouseOut;
|
|
inner.onmouseenter = handleMouseEnter;
|
|
inner.onmouseleave = handleMouseLeave;
|
|
|
|
const clickOnBody = () => {
|
|
return new Promise(resolve => {
|
|
document.body.onclick = () => { resolve(); };
|
|
internals.click(1, 1);
|
|
});
|
|
}
|
|
|
|
asyncTest(async done => {
|
|
// First move the mouse outside #outer to populate the MouseEvent.relatedTarget property
|
|
internals.movePointerTo(150, 150);
|
|
println("> move pointer over #inner");
|
|
internals.movePointerTo(10, 10);
|
|
println("> move pointer over #outer");
|
|
internals.movePointerTo(60, 60);
|
|
println("> click document.body");
|
|
await clickOnBody();
|
|
done();
|
|
});
|
|
</script>
|