Introduction to the use of setCapture and releaseCapture in HTML_javascript skills

In addition, another very important thing is that on Win32, the mouse move event is not continuous. That is to say, not every time we move the 1px mouse pointer, a mousemove will occur. Windows will check periodically. The mouse position changes to generate the mousemove event.
So, if it is a small page object, such as a dot with a diameter of 5px, if there is no setCapture and releaseCapture, then after pressing and holding the mouse, if you move the mouse quickly, it is possible that the mouse will move away, but the small The dot is still in place because the next mousemove event is no longer sent to the dot object.

The biggest difference between web development and windows development is that windows development is stateful, while web development is stateless. In windows, all operations can be controlled by the program, unless ctrl alt del is forced; But web operations are different. Even if a very important operation is performed, as soon as the user clicks the browser close button, the results of the previous operation will be wiped out. Although some code can be added to the onunload event to allow the user to choose whether to exit, but It cannot fundamentally solve the problem!

A few days ago, I saw the setCapture method from the Internet and learned about it. It roughly means this. When this method is used in a certain area of ​​the IE document, and writes Onclick or onmouse*** and other related mouse event methods, then it will monitor the corresponding mouse operation. Even if your mouse moves out of IE, it can still capture it. If you write in the onclick event in a certain div An alert command. At this time, when you click the close button, it will also pop up the alert window. releaseCapture is the opposite of the setCapture method, releasing the mouse monitor.

Using this feature, we can delay IE's closing of the window and other damage Destructive operations, some important operations can be processed before destructive operations are performed.
It is a pity: setCapture and releaseCapture do not support keyboard events. Only onmousedown, onmouseup, onmousemove, onclick, ondblclick, onmouseover, onmouseout and so on Mouse events work.

The following is a small example, if we want to protect the content in the div element divMain:
1. Execute the setCapture method on divMain:
document.getElementById(" divMain").setCapture();
2. Add a button btnChange to switch between setCapture and releaseCapture, and define a global variable;
var isFreeze = true;
3. In the onclick event of btnChange, Add the following code:

Copy code The code is as follows:

function change_capture(obj) {
isFreeze = !isFreeze;
if(isFreeze) {
obj.value = "releaseCapture";
document.getElementById("divMain").setCapture();
} else {
obj.value = "setCapture";
alert('Save! '); //You can perform important operations
document.getElementById("divMain").releaseCapture();
}
}

In the onclick event of divMain, add the following Code:

Copy code The code is as follows:

function click_func()
{
if(event.srcElement.id == "divMain")
{
alert("Processing..."); //General operations
document.getElementById("divMain").setCapture( );
}
else
{
if(isFreeze && event.srcElement.id != "btnChange")
{
alert('releaseCapture is not executed and cannot be clicked') ;
document.getElementById("divMain").setCapture();
}
}
}

Process ALT F4 in the body's onkeydown event Add the following code:

Copy code The code is as follows:

function keydown_func()
{
if (event.keyCode==115 && event.altKey) //ALT F4
{
if(isFreeze)
{
alert('Save!'); //Can be executed Important operations
}
//window.showModelessDialog("about:blank","","dialogWidth:1px;dialogheight:1px");
//return false;
}
document.getElementById("divMain").setCapture();
}

The complete code is as follows:

Copy code The code is as follows:

<script> <br>< !-- <BR>var isFreeze = true; <BR>function click_func() { <BR>if (event.srcElement.id == "divMain") { <BR>alert("Processing... "); //General operations <BR>document.getElementById("divMain").setCapture(); <BR>} else { <BR>if (isFreeze && event.srcElement.id != "btnChange") { <BR>alert('releaseCapture is not executed and cannot be clicked'); <BR>document.getElementById("divMain").setCapture(); <BR>} <BR>} <BR>} <BR>function keydown_func() { <BR>if (event.keyCode == 115 && event.altKey) //ALT F4 <BR>{ <BR>if (isFreeze) { <BR>alert('Save!'); //You can perform important operations<BR>} <BR>//window.showModelessDialog("about:blank","","dialogWidth:1px;dialogheight:1px"); <BR>//return false; <BR>} <BR>document.getElementById( "divMain").setCapture(); <BR>} <BR>function change_capture(obj) { <BR>isFreeze = !isFreeze; <BR>if (isFreeze) { <BR>obj.value = "releaseCapture"; <BR>document.getElementById("divMain").setCapture(); <BR>} else { <BR>obj.value = "setCapture"; <BR>alert('Save! '); //You can perform important operations <BR>document.getElementById("divMain").releaseCapture(); <BR>} <BR>} <BR>//--> <br></script>

Click Look at the IE menu or button :) or outside the IE window
id="btnChange"> ;

< ;/body>

About the application of call and apply functions in javascript
We often encounter call and apply functions in object-oriented applications in javascript; Sometimes you get confused. In fact, they can change the value of this reserved word in a function or object; the default value of this reserved word is the class itself. For example:

Copy code The code is as follows:

You will understand quickly after running the above page.
The call and apply functions can handle anonymous functions
The initialization application of the class is as follows:

Copy code The code is as follows:

Person = function() {
this.Init.apply(this, arguments);
} ;
Person.prototype = {
first: null,
last: null,
Init: function(first, last) {
this.first = first;
this.last = last;
},
fullName: function() {
return this.first ' ' this.last;
},
fullNameReversed: function() {
return this. last ', ' this.first;
}
};
var s = new Person2('creese', 'yang');
alert(s.fullName());
alert(s.fullNameReversed());

The call and apply functions can assign function content (with anonymous parameters; but not triggered)
The application of function binding events is as follows:

Copy code The code is as follows:

Function.prototype.BindForEvent = function() {
var __m = this, object = arguments[0], args = new Array();
for(var i = 1; i < arguments.length; i ){
args.push(arguments[i]);
}
return function(event) {
return __m.apply(object, [( event || window.event)].concat(args));
}
}

The application of call and apply functions regarding function binding parameters is as follows:

Copy code The code is as follows:

Function.prototype.Bind = function() {
var __m = this, object = arguments[0], args = new Array();
for(var i = 1; i < ; arguments.length; i ){
args.push(arguments[i]);
}
return function() {
return __m.apply(object, args);
}
}

The function functions of call and apply are the same; only the parameter formats are different; fun.call(obj, arguments); the arguments of apply are in array form; call is in singular form.