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实现图片切换的幻灯片效果源代码
Dec 12 Javascript
JavaScript打印iframe内容示例代码
Aug 20 Javascript
关于JS中的闭包浅谈
Aug 23 Javascript
jquery使用append(content)方法注意事项分享
Jan 06 Javascript
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
用window.onerror捕获并上报Js错误的方法
Jan 27 Javascript
详解Sea.js中Module.exports和exports的区别
Feb 12 Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
看看“疫苗查询”小程序有温度的代码
Jul 31 Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
Sep 16 Javascript
JavaScript实现随机点名小程序
Oct 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
Sublime里直接运行PHP配置方法
2014/11/28 PHP
PHP数组操作类实例
2015/07/11 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
JavaScript浏览器选项卡效果
2010/08/25 Javascript
jquery模拟按下回车实现代码
2011/09/20 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
获取IE浏览器Cookie信息的方法
2017/01/23 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
浅谈layui 表单元素的选中问题
2019/10/25 Javascript
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
Python读取Excel的方法实例分析
2015/07/11 Python
详解python里使用正则表达式的全匹配功能
2017/10/19 Python
python实现堆和索引堆的代码示例
2018/03/19 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
Django框架 querySet功能解析
2019/09/04 Python
Django实现分页显示效果
2019/10/31 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
一文读懂Python 枚举
2020/08/25 Python
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
深圳-东方伟业笔试部分
2015/02/11 面试题
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
工作岗位职责范本
2015/02/15 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
《跨越海峡的生命桥》教学反思
2016/02/18 职场文书
大学生如何逃脱“毕业季创业队即散伙”魔咒?
2019/08/19 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js