HTML in setCapture, analysis releaseCapture use

This article give you a brief introduction of the use of advanced technology setCapture under html drag in, releaseCapture, there is little need partners can refer to

Introduction 1. setCapture

setCapture mouse events can be locked on the specified element, when the element captures the mouse event, which can only act on the current element.

The following situation will lead to lock failure event:

When the window loses focus, lock the event, it will be automatically canceled.
alert can lead to locking events canceled. The solution is locked again after the alert.
Right mouse button will cause the event to unlock.

setCapture can only act on the following events:

onclick
ondblclick
onmousedown
onmouseup
onmouseover
onMouseOut

setCapture not acting on other events such as a keyboard, mouse events can only act on. Mainly used for: onmouseover and onmouseout events.

* SetCapture The assay is specific IE browser.

2. setCapture use format

setCapture has a boolean value parameter for setting whether to capture its child elements mouse events.

　　When the argument is ture, the current element will capture mouse events for all sub-elements within it, which specifies the child elements within the element does not trigger mouse events, which is consistent elements outside the sub-elements within the current element and the current element.
　　When the argument is false, the current element will not capture mouse events for all the sub-elements within it. Objects in the container can normally trigger event and cancel bubbling.

Example: currElement.setCapture(boolean)

3. setCapture - Simple - Demo

<script>
 var oBox = document.getElementById('infor'),
  oBtn = document.getElementsByTagName('button')[0];

 oBtn.onmousedown=function(){
  this.setCapture(true);
 }
 oBtn.onmouseover = function(){
 oBox.innerHTML+='onmouseover | ';
 }
 oBtn.onmouseout = function(){
 oBox.innerHTML+='onmouseout | ';
 }
 oBtn.onmouseup = function(){
 oBox.innerHTML+='onmouseup | ';
 }

</script>

4. setCapture summary

Lock setCapture () for the event, there is a corresponding event unlocking method releaseCapture () method, releaseCapture () event can be released to lock the specified elements. They both have to be used in pairs.

setCapture () method is mainly used for advanced drag technology, this is because in IE, when we want to drag the elements, when you press the mouse button and drag, when the drag is too fast, or beyond the browser when the document window's, dragging the object body onmousedown will fail. In Chrome we can bind to doucment onmouseout to determine whether or not this happens, but it does not work under IE, so the best solution would lock the mouse event element object to drag after drag lift Event locking.

Specific use cases: //www.jb51.net/article/93446.htm

Another similar functionality in Firefox, they are:

· captureEvents(Event.eventType)
· releaseEvents(Event.eventType)

Finally, a few questions in the learning process I setCapture there, and hope to be able to get master's instructions:

　　1. Why lock after the event, there is no move on the button elements button elements, but also trigger onmouseover and onmouseout events.

　　　　[See above specific code DEMO]

　　2. In the onclick event, mouse event will not permanently lock on the specified element.

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>setCapture - Simple - Demo</title>
 </head>
 <body>
  <button>click</button>
 </body>
</html>
 <script>
 var oBtn = document.getElementsByTagName('button')[0];
 oBtn.onclick=function(){
  this.setCapture();
 }
 </script>

　　Then you will find page after the second click to lock automatically canceled.

Transfer from the script home, the original Link https://m.jb51.net/article/93444.htm

HTML in setCapture, analysis releaseCapture use

Guess you like