selenium-webdriver
Version:
The official WebDriver JavaScript bindings from the Selenium project
125 lines (113 loc) • 2.47 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>An element that disappears on click</title>
<style>
#under_under {
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
background-color: white;
}
#under {
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
background-color: blue;
opacity: 0.1;
}
#over1 {
position: absolute;
top: 10px;
left: 10px;
width: 50px;
height: 50px;
background-color: red;
opacity: 0.2;
}
#over2 {
position: absolute;
top: 80px;
left: 10px;
width: 50px;
height: 50px;
background-color: red;
opacity: 0.2;
}
#over3 {
position: absolute;
top: 10px;
left: 80px;
width: 50px;
height: 50px;
background-color: red;
opacity: 0.2;
}
#over4 {
position: absolute;
top: 80px;
left: 80px;
width: 50px;
height: 50px;
background-color: red;
opacity: 0.2;
}
#over5 {
position: absolute;
top: 45px;
left: 45px;
width: 50px;
height: 50px;
background-color: red;
opacity: 0.2;
}
#log {
position: absolute;
top: 120px;
}
</style>
</head>
<body id="body">
<div id="under_under"><p id="contents">Hello</p></div>
<div id="under"><p id="other_contents">Hello</p></div>
<div id="over1"></div>
<div id="over2"></div>
<div id="over3"></div>
<div id="over4"></div>
<div id="over5"></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_under = byId("under_under");
var under = byId("under");
var over1 = byId("over1");
var over2 = byId("over2");
var over3 = byId("over3");
var over4 = byId("over4");
var over5 = byId("over5");
var body = document.body;
var types = ["click", "mousedown", "mouseup"];
for (var i = 0, type; (type = types[i]); ++i) {
under_under.addEventListener(type, handler);
under.addEventListener(type, handler);
over1.addEventListener(type, handler);
over2.addEventListener(type, handler);
over3.addEventListener(type, handler);
over4.addEventListener(type, handler);
over5.addEventListener(type, handler);
body.addEventListener(type, handler);
}
</script>
</body>
</html>