HTML中的setCapture和releaseCapture


setCapture函數的作用就是將后續的mouse事件都發送給這個對象,releaseCapture就是將鼠標事件還回去,由 document、window、object之類的自行來處理。這樣就保證了在拖動的過程中,不會由於經過了其它的元素而受到干擾。

另外,還有一個很重 要的事情是,在Win32上,mouse move的事件不是一個連續的,也就是說,並不是我們每次移動1px的鼠標指針,就會發生一個mousemove,windows會周期性檢查mouse 的位置變化來產生mousemove的事件。

所以,如果是一個很小的頁面對象,比如一個直徑5px的圓點,如果沒有setCapture和 releaseCapture,那么在鼠標按住之后,快速的移動鼠標,就有可能鼠標移動走了,但是小圓點還在原地,就是因為下一次的mousemove事 件已經不再發給這個圓點對象了。

 

web開發和windows開發最大的區別就是windows開發是有狀態的,而web開發是無狀態的,在windows中,一切操作都可以由程序來控制 ,除非強制執行ctrl+alt+del;但web操作就不一樣了,即使執行很重要的操作,用戶一點擊瀏覽器關閉按鈕,就將前面操作成果化為烏有.盡管可以在onunload事件中加些代碼,讓用戶可以選擇是否退出,但不能從根本上解決問題!

 

前幾天,從網上看到setCapture方法,了解了一下,大體是這樣的意思,當在IE文檔某個區域中使用了這個方法,並且寫了onclick或者 onmouse***等有關的鼠標事件方法,那么它就會監視相應的鼠標操作,即使你的鼠標移出了IE,它也一樣能捕獲到.如果你在某div中的 onclick事件中寫了一個alert命令,這時,你點擊的關閉按鈕,它也一樣會彈出alert窗口.releaseCapture與 setCapture方法相反,釋放鼠標監控.

 

利用這個特性,我們可以延緩IE的關閉窗口等破壞性操作,將一些重要的操作能夠在破壞性操作執行之前得到處理.

有一點遺憾:setCapturereleaseCapture 不支持鍵盤事件.只對onmousedown, onmouseup, onmousemove, onclick, ondblclick, onmouseover, onmouseout這樣的鼠標事件起作用.

 

下面是一個小例子,若我們要對divMain這個div元素里面的內容進行保護: 

1.對divMain執行setCapture方法: 
document.getElementById("divMain").setCapture();

2.加入一按鈕btnChange,可以進行setCapture和releaseCapture切換,定義一全局變量;
var isFreeze = true; 

3.在btnChange的onclick事件中,加入下列代碼:

function change_capture(obj) {
isFreeze = !isFreeze;

if(isFreeze) {
obj.value = "releaseCapture";
document.getElementById("divMain").setCapture();
} else {
obj.value = "setCapture";
alert('保存!'); //可以執行重要操作
document.getElementById("divMain").releaseCapture();
}
}



divMain的onclick事件中,加入下列代碼:

function click_func()
{
if(event.srcElement.id == "divMain")
{
alert("處理中..."); //常規操作
document.getElementById("divMain").setCapture();
}
else
{
if(isFreeze && event.srcElement.id != "btnChange")
{
alert('未執行releaseCapture,不能點擊');
document.getElementById("divMain").setCapture();
}
}
}



對ALT+F4進行處理,在body的onkeydown事件中加入下列代碼:

function keydown_func()
{
if (event.keyCode==115 && event.altKey) //ALT+F4
{
if(isFreeze)
{
alert('保存!'); //可以執行重要操作
}
//window.showModelessDialog("about:blank","","dialogWidth:1px;dialogheight:1px");
//return false;
}
document.getElementById("divMain").setCapture();
}



完整代碼如下:

<html>

<head>
<title>
setCapture和releaseCapture的小應用
</title>
<script>
< !--
var isFreeze = true;

function click_func() {
if (event.srcElement.id == "divMain") {
alert(
"處理中..."); //常規操作
document.getElementById("divMain").setCapture();
}
else {
if (isFreeze && event.srcElement.id != "btnChange") {
alert(
'未執行releaseCapture,不能點擊');
document.getElementById(
"divMain").setCapture();
}
}
}

function keydown_func() {

if (event.keyCode == 115 && event.altKey) //ALT+F4
{
if (isFreeze) {
alert(
'保存!'); //可以執行重要操作
}

//window.showModelessDialog("about:blank","","dialogWidth:1px;dialogheight:1px");
//return false;
}
document.getElementById(
"divMain").setCapture();
}

function change_capture(obj) {
isFreeze
= !isFreeze;
if (isFreeze) {
obj.value
= "releaseCapture";
document.getElementById(
"divMain").setCapture();
}
else {
obj.value
= "setCapture";
alert(
'保存!'); //可以執行重要操作
document.getElementById("divMain").releaseCapture();
}
}
//-->

</script>
</head>

<body onkeydown="keydown_func();">
<div id="divMain" onclick="click_func();">
點一下IE的菜單或者按鈕看看:) 又或者IE窗口外的地方
<input type="button" value="releaseCapture" onclick="change_capture(this);"
id
="btnChange">
<script language="javascript">
document.getElementById(
"divMain").setCapture();
</script>
</div>
</body>

</html>



關於javascriptcallapply函數的應用

我們經常在javascipt中的面向對象應用中遇到call和apply函數;有時會被搞糊塗。其實它們可以改變函數或對象中的this保留字的值;this保留字的默認值就是這個類本身。舉例說明:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="javascript">
test
= {
value:
'default',exec: function() {
alert(
this.value);
}
}
function hhh(obj) {
test.exec();test.exec.apply(obj);
}
</script>
</head>

<body>
<input type="button" onclick="hhh(this);" value="test" />
</body>

</html>



運行以上的頁面就很快明白了.

call和apply函數可以處理匿名函數

關於類的初始化應用如下:

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());



call和apply函數可以賦值函數內容(帶匿名參數;但不觸發)

關於函數綁定事件應用如下:

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

call和apply函數關於函數綁定參數應用如下:

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

call和apply函數功能是一樣的;就是參數格式不同;fun.call(obj, arguments);apply的arguments是數組形式;call則是單數形式。

 

 



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM