| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> |
| <title>An element that disappears on click</title> |
| <style> |
| #under { |
| position: absolute; |
| top: 20; |
| left: 20; |
| width: 100px; |
| height: 100px; |
| background-color: white; |
| } |
| |
| #over { |
| position: absolute; |
| top: 20; |
| left: 20; |
| width: 100px; |
| height: 100px; |
| background-color: red; |
| opacity: 0.5; |
| } |
| |
| #log { |
| position: absolute; |
| top: 120px; |
| } |
| </style> |
| </head> |
| <body id="body"> |
| <div id="under"><p id="contents">Hello</p></div> |
| <div id="over"></div> |
| <div id="log"> |
| <p>Log:<p> |
| </div> |
| <script> |
| var byId = document.getElementById.bind(document); |
| |
| var log = byId("log"); |
| |
| function handler(ev) { |
| log.innerHTML += "<p></p>"; |
| log.lastElementChild.textContent = ev.type + " in " + ev.target.id + " (handled by " + ev.currentTarget.id + ")\n"; |
| } |
| |
| var under = byId("under"); |
| var over = byId("over"); |
| var body = document.body; |
| |
| var types = ["click", "mousedown", "mouseup"]; |
| for (var i = 0, type; (type = types[i]); ++i) { |
| under.addEventListener(type, handler); |
| over.addEventListener(type, handler); |
| body.addEventListener(type, handler); |
| } |
| over.addEventListener("mousedown", function () { |
| over.style.display = "none"; |
| }) |
| </script> |
| </body> |
| </html> |
