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 相关文章推荐
JavaScript聚焦于第一个字段的代码
Oct 15 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
Feb 23 Javascript
jQuery 选择器(61种)整理总结
Sep 26 Javascript
js实现界面向原生界面发消息并跳转功能
Nov 22 Javascript
JS针对Array的各种操作汇总
Nov 29 Javascript
微信小程序 slider 详解及实例代码
Jan 10 Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 Javascript
详解vue服务端渲染(SSR)初探
Jun 19 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
如何基于JavaScript判断图片是否加载完成
Dec 28 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 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
php模块memcache和memcached区别分析
2011/06/14 PHP
深入解析php之sphinx
2013/05/15 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
PHP7匿名类用法分析
2016/09/26 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
2016/10/15 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
JS实现字符串去重及数组去重的方法示例
2018/04/21 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
vue路由分文件拆分管理详解
2020/08/13 Javascript
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
python网络编程之文件下载实例分析
2015/05/20 Python
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
PyQt5实现暗黑风格的计时器
2019/07/29 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
Python检查图片是否损坏及图片类型是否正确过程详解
2019/09/30 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
财务会计专业毕业生自荐信
2013/10/19 职场文书
认识深刻的检讨书
2014/02/16 职场文书
学习考察心得体会
2014/09/04 职场文书
工作年限证明模板
2014/11/01 职场文书
人事主管岗位职责
2015/02/04 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书
spring cloud gateway中如何读取请求参数
2021/07/15 Java/Android