document.body.onclick document监听事件兼容性的几种写法

最新推荐文章于 2022-08-31 08:30:39 发布

海拉姆

最新推荐文章于 2022-08-31 08:30:39 发布

阅读量1.3w

点赞数

<!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>

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>

欢迎加入我的QQ交流群425783133