web開發和windows開發最大的區別就是windows開發是有狀態的,而web開發是無狀態的,在windows中,一切操作都可以由程序來控制 ,除非強制執行ctrl+alt+del;但web操作就不一樣了,即使執行很重要的操作,用戶一點擊瀏覽器關閉按鈕,就將前面操作成果化爲烏有.儘管可以在onunload事件中加些代碼,讓用戶可以選擇是否退出,但不能從根本上解決問題!
前幾天,從網上看到setCapture方法,瞭解了一下,大體是這樣的意思,當在IE文檔某個區域中使用了這個方法,並且寫了onclick或者onmouse***等有關的鼠標事件方法,那麼它就會監視相應的鼠標操作,即使你的鼠標移出了IE,它也一樣能捕獲到.如果你在某div中的onclick事件中寫了一個alert命令,這時,你點擊的關閉按鈕,它也一樣會彈出alert窗口.releaseCapture與setCapture方法相反,釋放鼠標監控.
利用這個特性,我們可以延緩IE的關閉窗口等破壞性操作,將一些重要的操作能夠在破壞性操作執行之前得到處理.
有一點遺憾:setCapture和releaseCapture 不支持鍵盤事件.只對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事件中,加入下列代碼:
4).divMain的onclick事件中,加入下列代碼:
5).對ALT+F4進行處理,在body的onkeydown事件中加入下列代碼:
完整代碼如下:
注意:該實例僅能應用於IE
前幾天,從網上看到setCapture方法,瞭解了一下,大體是這樣的意思,當在IE文檔某個區域中使用了這個方法,並且寫了onclick或者onmouse***等有關的鼠標事件方法,那麼它就會監視相應的鼠標操作,即使你的鼠標移出了IE,它也一樣能捕獲到.如果你在某div中的onclick事件中寫了一個alert命令,這時,你點擊的關閉按鈕,它也一樣會彈出alert窗口.releaseCapture與setCapture方法相反,釋放鼠標監控.
利用這個特性,我們可以延緩IE的關閉窗口等破壞性操作,將一些重要的操作能夠在破壞性操作執行之前得到處理.
有一點遺憾:setCapture和releaseCapture 不支持鍵盤事件.只對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();
}
}
{
isFreeze = !isFreeze;
if(isFreeze)
{
obj.value = "releaseCapture";
document.getElementById("divMain").setCapture();
}
else
{
obj.value = "setCapture";
alert('保存!'); //可以執行重要操作
document.getElementById("divMain").releaseCapture();
}
}
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();
}
}
}
{
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();
}
{
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 LANGUAGE="JavaScript">
<!--
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" style="width:500px;height:400px;border:1px solid #999;padding:2px" 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>
<head>
<title>setCapture和releaseCapture的小應用</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
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" style="width:500px;height:400px;border:1px solid #999;padding:2px" 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>
源代碼:點此進入下載頁面
博客園下載地址:http://www.cnblogs.com/Files/redleaf1995/capture.rar