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事件中,加入下列代码:
function change_capture(obj)
{
        isFreeze 
= !isFreeze;
    
if(isFreeze)
    
{
        obj.value 
= "releaseCapture";
        document.getElementById(
"divMain").setCapture();
    }

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

}
4).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();
        }

    }

}
5).对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 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>
注意:该实例仅能应用于IE
源代码: https://files.cnblogs.com/redleaf1995/capture.rar
posted on 2008-04-18 11:25  红色枫叶  阅读(6441)  评论(0编辑  收藏  举报