Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the Document</title> <style> #parent { background: #008000; width: 200px; height: 140px; position: relative; } #child { background: #0000FF; width: 50%; height: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } textarea { height: 200px; width: 500px; display: block; } </style> </head> <body> <div id="parent"> Parent <div id="child">Child</div> </div> <textarea id="text"></textarea> <input onclick="clearText()" value="Clear" type="button"> <script> let parent = document.getElementById('parent'); parent.onmouseover = parent.onmouseout = parent.onmousemove = handler; function handler(event) { let type = event.type; while(type < 11) type += ' '; log(type + " target=" + event.target.id) return false; } function clearText() { text.value = ""; lastMessage = ""; } let lastMessageTime = 0; let lastMessage = ""; let repeatCounter = 1; function log(message) { if(lastMessageTime == 0) lastMessageTime = new Date(); let time = new Date(); if(time - lastMessageTime > 500) { message = '------------------------------\n' + message; } if(message === lastMessage) { repeatCounter++; if(repeatCounter == 2) { text.value = text.value.trim() + ' x 2\n'; } else { text.value = text.value.slice(0, text.value.lastIndexOf('x') + 1) + repeatCounter + "\n"; } } else { repeatCounter = 1; text.value += message + "\n"; } text.scrollTop = text.scrollHeight; lastMessageTime = time; lastMessage = message; } </script> </body> </html>