setCapture和releaseCapture的小应用(转)

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
源代码: http://files.cnblogs.com/redleaf1995/capture.rar

转载于:https://www.cnblogs.com/slcc/archive/2012/04/12/2444357.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值