浏览 4110 次
|
锁定老帖子 主题：document监听事件兼容性的几种写法
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-01-15
最后修改：2010-01-15
<!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=utf-8" />
<title>attachEvent Test</title>
<style type="text/css">
html,body
{
padding:0px;margin:0px;
font-family: "宋体";color: #4b4b4;background-color: #fff;
height:100%;text-align: center;
}
</style>
</head>
<body>
<br />
<div style="width:100%;height:200px;border:1px solid #ccc;">
<div id="top_mycoomix_div" style="display:block;border:1px solid #ccc;">
attachEvent test
</div>
</div>
<script type="text/javascript">
//方法一
Object.prototype.attachEvent = function(method,func)
{
//alert(this);//[object HTMLBodyElement]
if(!this[method]){
this[method]=func;
}
else{
this[method]=this[method].attach(func);
}
}
Function.prototype.attach=function(func){
var f=this;
return function(){
f();
func();
}
}
function hiddenTopMycoomix()
{
alert("into hiddenTopMycoomix function");
document.getElementById("top_mycoomix_div").style.display = "none";
}
//监听document.body必须设置body的样式height:100%;点击页面才能达到预期效果，否则只能在可见区域点击才有效.
//监听document则不存在这个问题
//不标准的调用方式
//window.document.body.attachEvent("onclick",function(){hiddenTopMycoomix();});
//window.document.body.attachEvent("onclick",hiddenTopMycoomix);
</script>
<script type="text/javascript">
//方法二
function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)};
function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)};
//封装后统一的调用方式
//addListener(document.body,"click",hiddenTopMycoomix);
</script>
<script type="text/javascript">
//方法三
//引入用到的coos脚本库部分，实际应用中不在页面上而采用导入js文件的方式
var coos = function(){this.version = "1.0";};
coos.$id = function(id)
{
return document.getElementById(id);
};
coos.$obj = function(el)
{
var obj = el;
if(typeof(el) == "string")
{
obj = document.getElementById(el);
}
return obj;
};
coos.event = function(e)
{
var e = e || window.event;
return e;
};
coos.event.format = function(e)
{
var e = e || window.event;
try
{
if(!e.pageX && e.clientX)//firefox3 nonsupport pageX
{
e.pageX = e.clientX + document.body.scrollLeft;
e.pageY = e.clientY + document.documentElement.scrollTop;
}
}
catch(e){}
if(window.event)
{
e.charCode = (e.type == "keypress") ? e.keyCode : 0;
e.eventPhase = 2;
e.isChar = (e.charCode > 0);
e.preventDefault = function ()
{
this.returnValue = false;
};
if(e.type == "mouseout")
{
e.relatedTarget = e.toElement;
}
else if(e.type == "mouseover")
{
e.relatedTarget = e.formElement;
}
e.stopPropagation = function ()
{
this.cancelBubble = true;
};
e.target = e.srcElement;
e.time = (new Date()).getTime();
}
try
{
if (e.target.nodeType == 3)
{// defeat Safari bug
e.target = e.target.parentNode;
}
//如果不存在keyCode属性，同时存在which属性则赋值,因为该属性为只读属性(has only a getter)
if(!e.keyCode && e.which)
{
e.keyCode = e.which;
}
}
catch(e){}
return e;
};
coos.event.add = function(el,EventType,callback)
{
var obj = coos.$obj(el);
if(obj.addEventListener)
{
obj.addEventListener(EventType,callback,false);
}
else if(obj.attachEvent)
{
obj.attachEvent('on'+EventType,callback);
}
else
{
obj['on'+EventType] = callback;
}
};
//方便页面加载完成后执行方法的接口
coos.onloadEvent = function(fn)
{
if (window.addEventListener)
{
window.addEventListener("load",fn,false);
}
else if(window.attachEvent)
{
window.attachEvent("onload", fn);
}
else
{
window.onload = fn;
}
};
//以下为实现代码部分
var coomixTimeout = null;
function hiddenTopMycoomix2(e)
{
var obj = coos.$id("top_mycoomix_div");
if(!obj){return;}
var e = coos.event.format(e);
coomixTimeout = setTimeout(function(){obj.style.display = "none";},100);
if(e.target == obj)
{
clearTimeout(coomixTimeout);
}
}
coos.event.add(document,"click",hiddenTopMycoomix2);
//在DOM元素加载完成前的实现代码，需要在页面元素加载完成后执行,一般情况下在window.onload后执行
coos.onloadEvent(function(){
var obj = coos.$id("testDom");
obj.innerHTML = obj.innerHTML + "<br />after set value";
setTimeout(function(){obj.style.display = "none";},500);
});
</script>
<div id="testDom">testDom</div>
</body>
</html>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
