Call this method during the handling of a mousedown event to retarget all mouse events to this element until the mouse button is released or document.releaseCapture() is called.
element.setCapture(retargetToElement);
retargetToElementtrue, all events are targeted directly to this element; if false, events can also fire at descendants of this element.In this example, the current mouse coordinates are drawn while you mouse around after clicking and holding down on an element.
<html>
<head>
<title>Mouse Capture Example</title>
<style type="text/css">
#myButton {
border: solid black 1px;
color: black;
padding: 2px;
box-shadow: black 2px 2px;
}
</style>
<script type="text/javascript">
function init() {
var btn = document.getElementById("myButton");
btn.addEventListener("mousedown", mouseDown, false);
btn.addEventListener("mouseup", mouseUp, false);
}
function mouseDown(e) {
//e.target.setCapture(); // this method needs to be defined
e.target.addEventListener("mousemove", mouseMoved, false);
}
function mouseUp(e) {
e.target.removeEventListener("mousemove", mouseMoved, false);
}
function mouseMoved(e) {
var output = document.getElementById("output");
output.innerHTML = "Position: " + e.clientX + ", " + e.clientY;
}
</script>
</head>
<body onload="init()">
<p>This is an example of how to use mouse capture on elements in Gecko 2.0.</p>
<p><a id="myButton" href="#">Test Me</a></p>
<div id="output">No events yet</div>
</body>
</html>
The element may not be scrolled completely to the top or bottom, depending on the layout of other elements.
Based on Internet Explorer's implementation.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/element/setCapture