快捷導(dǎo)航

HTML中的setCapture和releaseCapture使用介紹

更新時(shí)間：2012年03月21日 11:50:18 作者：

setCapture函數(shù)的作用就是將后續(xù)的mouse事件都發(fā)送給這個(gè)對(duì)象，releaseCapture就是將鼠標(biāo)事件還回去，由 document、window、object之類(lèi)的自行來(lái)處理。這樣就保證了在拖動(dòng)的過(guò)程中，不會(huì)由于經(jīng)過(guò)了其它的元素而受到干擾

另外，還有一個(gè)很重要的事情是，在Win32上，mouse move的事件不是一個(gè)連續(xù)的，也就是說(shuō)，并不是我們每次移動(dòng)1px的鼠標(biāo)指針，就會(huì)發(fā)生一個(gè)mousemove，windows會(huì)周期性檢查mouse 的位置變化來(lái)產(chǎn)生mousemove的事件。
所以，如果是一個(gè)很小的頁(yè)面對(duì)象，比如一個(gè)直徑5px的圓點(diǎn)，如果沒(méi)有setCapture和 releaseCapture，那么在鼠標(biāo)按住之后，快速的移動(dòng)鼠標(biāo)，就有可能鼠標(biāo)移動(dòng)走了，但是小圓點(diǎn)還在原地，就是因?yàn)橄乱淮蔚膍ousemove事件已經(jīng)不再發(fā)給這個(gè)圓點(diǎn)對(duì)象了。

web開(kāi)發(fā)和windows開(kāi)發(fā)最大的區(qū)別就是windows開(kāi)發(fā)是有狀態(tài)的，而web開(kāi)發(fā)是無(wú)狀態(tài)的，在windows中，一切操作都可以由程序來(lái)控制，除非強(qiáng)制執(zhí)行ctrl+alt+del；但web操作就不一樣了，即使執(zhí)行很重要的操作，用戶(hù)一點(diǎn)擊瀏覽器關(guān)閉按鈕，就將前面操作成果化為烏有.盡管可以在onunload事件中加些代碼，讓用戶(hù)可以選擇是否退出，但不能從根本上解決問(wèn)題!

前幾天，從網(wǎng)上看到setCapture方法，了解了一下，大體是這樣的意思，當(dāng)在IE文檔某個(gè)區(qū)域中使用了這個(gè)方法，并且寫(xiě)了onclick或者 onmouse***等有關(guān)的鼠標(biāo)事件方法，那么它就會(huì)監(jiān)視相應(yīng)的鼠標(biāo)操作，即使你的鼠標(biāo)移出了IE，它也一樣能捕獲到.如果你在某div中的 onclick事件中寫(xiě)了一個(gè)alert命令，這時(shí)，你點(diǎn)擊的關(guān)閉按鈕，它也一樣會(huì)彈出alert窗口.releaseCapture與 setCapture方法相反，釋放鼠標(biāo)監(jiān)控.

利用這個(gè)特性，我們可以延緩IE的關(guān)閉窗口等破壞性操作，將一些重要的操作能夠在破壞性操作執(zhí)行之前得到處理.
有一點(diǎn)遺憾:setCapture和releaseCapture 不支持鍵盤(pán)事件.只對(duì)onmousedown， onmouseup， onmousemove， onclick， ondblclick， onmouseover， onmouseout這樣的鼠標(biāo)事件起作用.

下面是一個(gè)小例子，若我們要對(duì)divMain這個(gè)div元素里面的內(nèi)容進(jìn)行保護(hù):
1.對(duì)divMain執(zhí)行setCapture方法:
document.getElementById("divMain").setCapture()；
2.加入一按鈕btnChange，可以進(jìn)行setCapture和releaseCapture切換，定義一全局變量；
var isFreeze = true；
3.在btnChange的onclick事件中，加入下列代碼:

復(fù)制代碼代碼如下:

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

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

復(fù)制代碼代碼如下:

 
function click_func() 
{ 
if(event.srcElement.id == "divMain") 
{ 
alert("處理中...")； //常規(guī)操作 
document.getElementById("divMain").setCapture()； 
} 
else 
{ 
if(isFreeze && event.srcElement.id != "btnChange") 
{ 
alert('未執(zhí)行releaseCapture，不能點(diǎn)擊')； 
document.getElementById("divMain").setCapture()； 
} 
} 
} 

對(duì)ALT+F4進(jìn)行處理，在body的onkeydown事件中加入下列代碼:

復(fù)制代碼代碼如下:

 
function keydown_func() 
{ 
if (event.keyCode==115 && event.altKey) //ALT+F4 
{ 
if(isFreeze) 
{ 
alert('保存！')； //可以執(zhí)行重要操作 
} 
//window.showModelessDialog("about:blank"，""，"dialogWidth:1px；dialogheight:1px")； 
//return false； 
} 
document.getElementById("divMain").setCapture()； 
} 

完整代碼如下:

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<title> 
setCapture和releaseCapture的小應(yīng)用 
</title> 
<script> 
< !-- 
var isFreeze = true; 
function click_func() { 
if (event.srcElement.id == "divMain") { 
alert("處理中..."); //常規(guī)操作 
document.getElementById("divMain").setCapture(); 
} else { 
if (isFreeze && event.srcElement.id != "btnChange") { 
alert('未執(zhí)行releaseCapture,不能點(diǎn)擊'); 
document.getElementById("divMain").setCapture(); 
} 
} 
} 
function keydown_func() { 
if (event.keyCode == 115 && event.altKey) //ALT+F4 
{ 
if (isFreeze) { 
alert('保存！'); //可以執(zhí)行重要操作 
} 
//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('保存！'); //可以執(zhí)行重要操作 
document.getElementById("divMain").releaseCapture(); 
} 
} 
//--> 
</script> 
</head> 
<body onkeydown="keydown_func();"> 
<div id="divMain" onclick="click_func();"> 
點(diǎn)一下IE的菜單或者按鈕看看:) 又或者IE窗口外的地方 
<input type="button" value="releaseCapture" onclick="change_capture(this);" 
id="btnChange"> 
<script language="javascript"> 
document.getElementById("divMain").setCapture(); 
</script> 
</div> 
</body> 
</html> 

關(guān)于javascript中call和apply函數(shù)的應(yīng)用
我們經(jīng)常在javascipt中的面向?qū)ο髴?yīng)用中遇到call和apply函數(shù)；有時(shí)會(huì)被搞糊涂。其實(shí)它們可以改變函數(shù)或?qū)ο笾械膖his保留字的值；this保留字的默認(rèn)值就是這個(gè)類(lèi)本身。舉例說(shuō)明：

復(fù)制代碼代碼如下:

 
<!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> 

運(yùn)行以上的頁(yè)面就很快明白了.
call和apply函數(shù)可以處理匿名函數(shù)
關(guān)于類(lèi)的初始化應(yīng)用如下：

復(fù)制代碼代碼如下:

 
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函數(shù)可以賦值函數(shù)內(nèi)容（帶匿名參數(shù)；但不觸發(fā)）
關(guān)于函數(shù)綁定事件應(yīng)用如下：

復(fù)制代碼代碼如下:

 
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函數(shù)關(guān)于函數(shù)綁定參數(shù)應(yīng)用如下：

復(fù)制代碼代碼如下:

 
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函數(shù)功能是一樣的；就是參數(shù)格式不同；fun.call(obj， arguments)；apply的arguments是數(shù)組形式；call則是單數(shù)形式。

您可能感興趣的文章: