|
|
@@ -0,0 +1,62 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<style>
|
|
|
+body {
|
|
|
+ margin: 0px;
|
|
|
+ padding: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+#outer {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ background-color: yellowgreen;
|
|
|
+}
|
|
|
+
|
|
|
+#inner {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ background-color: magenta;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<div id="outer"><div id="inner"></div></div>
|
|
|
+<script src="../include.js"></script>
|
|
|
+<script>
|
|
|
+function handleMouseOver(e) {
|
|
|
+ println(`mouseover target.id=(${e.target.id}) currentTarget.id=(${e.currentTarget.id})`);
|
|
|
+}
|
|
|
+function handleMouseOut(e) {
|
|
|
+ println(`mouseout target.id=(${e.target.id}) currentTarget.id=(${e.currentTarget.id})`);
|
|
|
+}
|
|
|
+function handleMouseEnter(e) {
|
|
|
+ println(`mouseenter target.id=(${e.target.id}) currentTarget.id=(${e.currentTarget.id})`);
|
|
|
+}
|
|
|
+function handleMouseLeave(e) {
|
|
|
+ println(`mouseleave target.id=(${e.target.id}) currentTarget.id=(${e.currentTarget.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 => {
|
|
|
+ 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>
|
Aliaksandr Kalenik