setCapture、releaseCapture、addEve
2017-11-08 本文已影响0人
z_j_r
前言:
只要还有明天,今天就永远是起跑线
--------------------------------正文---------------------------------
setCapture可以将鼠标事件锁定在指定的元素上,当元素捕获了鼠标事件后,该事件只能作用在当前元素上
releaseCapture()可以为指定的元素解除事件锁定
以下情况会导致事件锁定失败:
1、当窗口失去焦点时,锁定的事件,自动就会取消
2、alert也会导致事件的锁定取消。解决办法是在alert之后再次锁定
3、鼠标右键也会导致事件解锁
setCapture只可以作用于以下事件:
onclick
ondblclick
onmousedown
onmouseup
onmouseover
onmouseout
setCapture不可作用于键盘等其它事件,只能作用于鼠标事件
主要用于: onmouseover 与 onmouseout 事件。
addEventListener() 方法用于向指定元素添加事件句柄
EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上,当该对象触发指定的
事件时,指定的回调函数就会被执行。 事件目标可以是一个文档上的元素 Document 本身,或者任何其他支持
事件的对象 (比如 XMLHttpRequest)
removeEventListener() 方法用于移除由 addEventListener() 方法添加的事件句柄
通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除
注意: 如果要移除事件句柄,addEventListener() 的执行函数必须使用外部函数
格式
addEventListener("事件名" , "事件处理函数" , "布尔值")
注意:两个都要用时函数不能带参数,不然不能移除
eg:
document.body.addEventListener('touchmove',bodyScroll,false)
document.body.removeEventListener('touchmove',bodyScroll,false)
使用window.navigator.userAgent属性判断浏览器类型及版本
滚轮封装
// 添加事件监听
function addEvent(obj,sEv,fn){
// attachEvent——兼容:IE7、IE8; 不兼容firefox、chrome、IE9、IE10、IE11、safari、opera
// addEventListener——兼容:firefox、chrome、IE、safari、opera; 不兼容IE7、IE8
if(obj.addEventListener){
obj.addEventListener(sEv,fn,false);
}else{
obj.attachEvent('on'+sEv,fn);
}
}
// 删除事件监听
function removeEvent(obj,sEv,fn){
if(obj.removeEventListener){
obj.removeEventListener(sEv,fn,false);
}else{
obj.detachEvent('on'+sEv,fn);
}
}
// 滚轮事件
function addWheel(obj,fn){
// 判断浏览器是否是Firefox
// 使用window.navigator.userAgent属性判断浏览器类型及版本
if(window.navigator.userAgent.indexOf('Firefox')!=-1){
addEvent(obj,'DOMMouseScroll',fnWheel);
}else{
addEvent(obj,'mousewheel',fnWheel);
}
// 滚轮触发执行函数
function fnWheel(ev){
var oEvent = ev||event;
// ture 下
// false 上
var bDir = true;
// 判断滚动方向
bDir = oEvent.wheelDelta?oEvent.wheelDelta<0:oEvent.detail>0;
/* if(oEvent.wheelDelta){
//other
if(oEvent.wheelDelta<0){
bDir = true;
}else{
bDir = false;
}
}else{
//firefox
if(oEvent.detail>0){
bDir = true;
}else{
bDir = false;
}
} */
// 执行回调函数
fn&&fn(bDir);
// 阻止默认事件 addEventListener没有return false
ev.preventDefault&&ev.preventDefault();
return false;
}
}