Geek Answers Handbook

Mouse Capture in Firefox

In IE, there is .setCapture () ;. releaseCapture (). What is equivalent to these features in Firefox without using jQuery? (my client does not want to use it)

+4
source share
10 answers

There is no such function in FF / JavaScript. Capture functions exist only in JScript.

-3
source

As mentioned above, Firefox does not offer this feature, and you can bypass it by tracking events throughout the document. To make sure there is no better trick, I just checked the jQuery UI and it seems they are using the same approach. For example, if you want to capture mouse movements when the mouse is in jQuery, you should:

$("#someElement"). mousedown(function() { $(document).mousemove(captureMouseMove) }). mouseup(function() { $(document).unbind("mousemove", captureMouseMove) }); function captureMouseMove(event) { // ... }
+12
source

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

setCapture and releaseCapture were added in Firefox 4 (with the release of Gecko 2) on March 22, 2011. However, WebKit (Chrome / Safari) still does not have these features.

+8
source

To capture the mouse at any time is not good behavior, I think why setCapture not provided.

However, in order to capture a mouse for drag and drop, you just need to handle the mouse events (mouse {up, down, move}) of the document object, which can be triggered by drag and drop 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>
+2
source

I believe elements.setCapture () and document.releaseCapture () were added in Firefox with FF4: https://developer.mozilla.org/en/DOM/element.setCapture

"The call element.setCapture () method during the processing of the mousedown event to reassign all mouse events to this element until the mouse button is released or document.releaseCapture () is called.

+2
source

The @JanZich solution works fine, except that it does not capture the mouse up event if the mouse is outside the element. This helped me better:

 $("#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); }
+2
source

Using event bubbles: add event listeners for bubbling mouse events to a high-level container (maybe even a document ) and use a variable to keep track of which item should be captured.

Without additional information about what you are trying to do, there is nothing more to say.

+1
source

SetCapture and ReleaseCapture are the IE security features you discovered. Firefox has no native way to manipulate the content menu in the same way.

This seems to 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 for using this to replace functions.

0
source

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

0
source

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

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

Use removeEventListener with the same parameters for release:

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

References

-1
source

More articles:


All Articles