CODEWITHSUNDEEP
javascripthtml
Cornel
Cornel

Reputation: 4709

Capture mouse in Firefox

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)

Upvotes: 4

Views: 8418

Answers (10)

Paul Sweatte
Paul Sweatte

Reputation: 24617

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

Upvotes: -1

Carlos Barbosa
Carlos Barbosa

Reputation: 3083

@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);
}

Upvotes: 2

Chip Cressman
Chip Cressman

Reputation: 81

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.

Upvotes: 8

RnMss
RnMss

Reputation: 3833

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>

Upvotes: 2

Brendan
Brendan

Reputation: 21

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."

Upvotes: 2

Jona
Jona

Reputation: 305

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.

Upvotes: 0

Jan Zich
Jan Zich

Reputation: 15323

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)
{
    // ...
}

Upvotes: 12

Christoph
Christoph

Reputation: 169563

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.

Upvotes: 1

dalizard
dalizard

Reputation: 471

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/

Upvotes: 0

alexn
alexn

Reputation: 58962

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

Upvotes: -3

Related Questions