HTML中的setCapture和releaseCapture使用介绍


Posted in Javascript onMarch 21, 2012

另外,还有一个很重 要的事情是,在Win32上,mouse move的事件不是一个连续的,也就是说,并不是我们每次移动1px的鼠标指针,就会发生一个mousemove,windows会周期性检查mouse 的位置变化来产生mousemove的事件。
所以,如果是一个很小的页面对象,比如一个直径5px的圆点,如果没有setCapture和 releaseCapture,那么在鼠标按住之后,快速的移动鼠标,就有可能鼠标移动走了,但是小圆点还在原地,就是因为下一次的mousemove事 件已经不再发给这个圆点对象了。

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

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

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

关于javascript中call和apply函数的应用
我们经常在javascipt中的面向对象应用中遇到call和apply函数;有时会被搞糊涂。其实它们可以改变函数或对象中的this保留字的值;this保留字的默认值就是这个类本身。举例说明:
<!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>

运行以上的页面就很快明白了.
call和apply函数可以处理匿名函数
关于类的初始化应用如下:
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函数可以赋值函数内容(带匿名参数;但不触发)
关于函数绑定事件应用如下:
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函数关于函数绑定参数应用如下:
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函数功能是一样的;就是参数格式不同;fun.call(obj, arguments);apply的arguments是数组形式;call则是单数形式。
Javascript 相关文章推荐
九种js弹出对话框的方法总结
Mar 12 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
Dec 31 Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 Javascript
javascript类型转换示例
Apr 29 Javascript
Jquery跳到页面指定位置的方法
May 12 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
Jun 22 Javascript
全屏js头像上传插件源码高清版
Mar 29 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 Javascript
vue 利用路由守卫判断是否登录的方法
Sep 29 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
Mar 21 #Javascript
js对象关系图 方便dom操作
Mar 18 #Javascript
再谈javascript面向对象编程
Mar 18 #Javascript
一个简单的Ext.XTemplate的实例代码
Mar 18 #Javascript
Javascript 面向对象编程(coolshell)
Mar 18 #Javascript
Javascript面向对象编程
Mar 18 #Javascript
javascript 常用功能总结
Mar 18 #Javascript
You might like
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
php下批量挂马和批量清马代码
2011/02/27 PHP
日常整理PHP中简单的图形处理(经典)
2015/10/26 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
2018/11/29 PHP
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
微信小程序开发背景图显示功能
2018/08/08 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
2019/04/17 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
2020/11/05 Javascript
Vue实现购物车基本功能
2020/11/08 Javascript
Python实现类的创建与使用方法示例
2017/07/25 Python
在python3中实现更新界面
2020/02/21 Python
Python selenium使用autoIT上传附件过程详解
2020/05/26 Python
Python使用tkinter实现小时钟效果
2021/02/22 Python
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
Java中实现多态的机制
2015/08/09 面试题
新锐科技Java程序员面试题
2016/07/25 面试题
考试没考好检讨书
2014/01/31 职场文书
机械专业技术员求职信
2014/06/14 职场文书
年度安全生产目标责任书
2014/07/23 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
2015年六一儿童节活动总结
2015/02/11 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android