Capture mouse in Firefox

https://stackoverflow.com/questions/820026

03-07-2019
|

Question

In IE exists .setCapture(); .releaseCapture() functions. What's the equivalent of these functions in Firefox without using jQuery? (my client does not want to use it)

Solution

There is no such function in FF / JavaScript. The capture functions only exists in JScript.

OTHER TIPS

As it has been said above, Firefox does not offer this functionality, and you can work around it by monitoring events on the entire document. To be sure that there is no a better trick, I’ve just checked jQuery UI, and it appears they use the same approach. So for instance if you wanted to capture mouse movements when mouse is down in jQuery, you would do:

$("#someElement").
    mousedown(function() { $(document).mousemove(captureMouseMove) }).
    mouseup(function() { $(document).unbind("mousemove", captureMouseMove) });

function captureMouseMove(event)
{
    // ...
}

https://developer.mozilla.org/en-US/docs/DOM/element.setCapture

setCapture and releaseCapture were added to Firefox 4 (with the release of Gecko 2) on March 22, 2011. However, WebKit (Chrome/Safari) still lacks these functions.

I believe element.setCapture() and document.releaseCapture() were added to Firefox as of FF4: https://developer.mozilla.org/en/DOM/element.setCapture

"Call element.setCapture() 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."

To capture the mouse at anytime is not good behavior, I think that's why setCapture is not provided.

However, to capture the mouse for a drag-and-drop, you just need to handle the mouse events (mouse{up,down,move}) of the document object, which may be triggered when dragging even outside the client area.

<html>
<head>
    <title>Capture test</title>
</head>
<body>
<script type="text/javascript">
    document.onmousedown = function () {
        state.innerHTML = "Dragging started";
    };
    document.onmousemove = function (e) {
        coord.innerHTML = e.clientX + ',' + e.clientY;
    }
    document.onmouseup = function (e) {
        state.innerHTML = "Dragging stopped";
    }
</script>
<p id="state">.</p>
<p id="coord">.</p>
</body>
</html>

@JanZich's solution works great except it doesn't capture the mouse up event if the mouse is outside the element. This worked better for me:

$("#someElement").mousedown(function() { 
    $(document).mousemove(captureMouseMove); 
    $(document).mouseup(captureMouseUp);
});

function captureMouseMove(event) {
    console.log("mouse move");
}                       

function captureMouseUp(event) {
    console.log("mouse up");
    $(document).unbind("mousemove", captureMouseMove);
    $(document).unbind("mouseup", captureMouseUp);
}

Use event bubbling: add event listeners for the bubbling mouse events to a high-level container (possibly even document) and use a variable to track which element should be the capturing one.

Without further information on what you're trying to do, there's not really any more to say.

setCapture() and releaseCapture() are Internet Explorer specific non-standard methods. There is no implementation in Firefox. There is a framework called Gimme that gives you some mouse capture functionality. http://www.codeplex.com/gimme/

SetCapture and ReleaseCapture are IE propriatory functions as you've discovered. There is no native way to manipulate the content menu in the same way in Firefox.

It seems like it might be possible with Gimme which can be found at http://www.codeplex.com/gimme/Wiki/Recent.aspx. There is a blog post here: http://blog.stchur.com/2007/11/21/setcapture-with-gimme which describes one scenario of using this to replace the functions.

Use true as the third parameter of the addEventListener method to capture. For example:

document.addEventListener("click", function(event){location.hash=event.target}, true)

Use removeEventListener with the same parameters to release:

document.removeEventListener("click", function(event){location.hash=event.target}, true);

References

Licensed under: CC-BY-SA with attribution

Not affiliated with StackOverflow