web開發(fā)和windows開發(fā)最大的區(qū)別就是windows開發(fā)是有狀態(tài)的,而web開發(fā)是無狀態(tài)的,在windows中,一切操作都可以由程序來控制 ,除非強(qiáng)制執(zhí)行ctrl+alt+del;但web操作就不一樣了,即使執(zhí)行很重要的操作,用戶一點(diǎn)擊瀏覽器關(guān)閉按鈕,就將前面操作成果化為烏有.盡管可以在onunload事件中加些代碼,讓用戶可以選擇是否退出,但不能從根本上解決問題!
??????? 前幾天,從網(wǎng)上看到setCapture方法,了解了一下,大體是這樣的意思,當(dāng)在IE文檔某個區(qū)域中使用了這個方法,并且寫了onclick或者onmouse***等有關(guān)的鼠標(biāo)事件方法,那么它就會監(jiān)視相應(yīng)的鼠標(biāo)操作,即使你的鼠標(biāo)移出了IE,它也一樣能捕獲到.如果你在某div中的onclick事件中寫了一個alert命令,這時,你點(diǎn)擊的關(guān)閉按鈕,它也一樣會彈出alert窗口.releaseCapture與setCapture方法相反,釋放鼠標(biāo)監(jiān)控.
??????? 利用這個特性,我們可以延緩IE的關(guān)閉窗口等破壞性操作,將一些重要的操作能夠在破壞性操作執(zhí)行之前得到處理.
??????? 有一點(diǎn)遺憾:setCapture和releaseCapture 不支持鍵盤事件.只對onmousedown, onmouseup, onmousemove, onclick, ondblclick, onmouseover, onmouseout這樣的鼠標(biāo)事件起作用.
??????? 下面是一個小例子,若我們要對divMain這個div元素里面的內(nèi)容進(jìn)行保護(hù):
???????? 1). 對divMain執(zhí)行setCapture方法:
document.getElementById("divMain").setCapture();
2).加入一按鈕btnChange,可以進(jìn)行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('保存！');??????????????????????? //可以執(zhí)行重要操作
??????? document.getElementById("divMain").releaseCapture();
??? }
}4).divMain的onclick事件中,加入下列代碼:
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();
??????? }
??? }
}5).對ALT+F4進(jìn)行處理,在body的onkeydown事件中加入下列代碼:
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();
}完整代碼如下:
<HTML>
??? <head>
??????? <title>setCapture和releaseCapture的小應(yīng)用</title>
??????? <SCRIPT LANGUAGE="JavaScript">...
??????? <!--?????
??????????? 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" style="width:500px;height:400px;border:1px solid #999;padding:2px" 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>注意:該實(shí)例僅能應(yīng)用于IE
本文來自CSDN博客，轉(zhuǎn)載請標(biāo)明出處：http://blog.csdn.net/redleaf1995/archive/2008/03/06/2154784.aspx