ace/experiments/capture.html
2010-04-07 09:23:59 +02:00

67 lines
1.3 KiB
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Fabian Jakobs">
<!-- Date: 2010-04-07 -->
<style type="text/css" media="screen">
#juhu {
width: 100px;
height: 50px;
background: yellow;
}
</style>
</head>
<body>
<div id="juhu">
</div>
<script type="text/javascript" charset="utf-8">
var el = document.getElementById("juhu");
el.addEventListener("mousedown", function(e) {
el.innerHTML = e.pageX + " " + e.pageY;
capture(
el,
function(e) {
el.innerHTML = e.pageX + " " + e.pageY;
}, function() {
el.innerHTML = "";
}
);
});
function capture(el, eventHandler, releaseCaptureHandler)
{
function onMouseMove(e)
{
eventHandler(e);
e.stopPropagation();
}
function onMouseUp(e)
{
eventHandler && eventHandler(e);
releaseCaptureHandler && releaseCaptureHandler();
document.removeEventListener("mousemove", onMouseMove, true);
document.removeEventListener("mouseup", onMouseUp, true);
e.stopPropagation();
}
document.addEventListener("mousemove", onMouseMove, true);
document.addEventListener("mouseup", onMouseUp, true);
}
</script>
</body>
</html>