document.body.onclick document監聽事件相容性的幾種寫法
<!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>
歡迎加入我的QQ交流群425783133