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 相关文章推荐
基于jquery完美拖拽,可返回拖动轨迹
Mar 29 Javascript
js汉字转拼音实现代码
Feb 06 Javascript
JavaScript中定义类的方式详解
Jan 07 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
Dec 20 Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
JS array数组检测方式解析
May 19 Javascript
前端学习——JavaScript原生实现购物车案例
Mar 31 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
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
无刷新动态加载数据 滚动条加载适合评论等页面
2013/10/16 PHP
Symfony2学习笔记之模板用法详解
2016/03/17 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
JavaScript更改class和id的方法
2008/10/10 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
js实现卡片式项目管理界面UI设计效果
2015/12/08 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
2016/12/22 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
Vue中自定义全局组件的实现方法
2017/12/08 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
详解vue后台系统登录态管理
2019/04/02 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
2019/06/07 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
前端性能优化建议
2020/09/17 Javascript
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
Python语言实现将图片转化为html页面
2017/12/06 Python
python的exec、eval使用分析
2017/12/11 Python
python实现维吉尼亚加密法
2019/03/20 Python
深入浅析python3中的unicode和bytes问题
2019/07/03 Python
python基于socket函数实现端口扫描
2020/05/28 Python
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
俄罗斯购买剧院和演唱会门票网站:Parter.ru
2019/11/09 全球购物
实习护理工作自我评价
2013/09/25 职场文书
同学会邀请书大全
2014/01/12 职场文书
离婚承诺书格式范文
2015/05/04 职场文书