好çåºè¯ä¸å¤è¯´ æç´æ¥ç»åºä¸ä»½æ¼ç¤º
ç°å¨æè¦å¯¹id为demoçèç¹çå代çæ¥æclass testçèç¹è¿è¡çå¬
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#demo .test{
width: 10px;
height: 10px;
background-color: #00AEEF;
margin: 5px;
}
</style>
</head>
<body>
<div id="demo">
</div>
<script>
//è·åææçç¶èç¹
function getParentNode(Obj,Arr){
if(!Arr){
var Arr=[];
}
Arr.push(Obj);
if(Obj&&Obj.parentNode){
getParentNode(Obj.parentNode,Arr);
}
return Arr;
};
//å¤ææ¯å¦æ¥æclass
function hasClass(e,v){
if(!e.getAttribute)return false;
if(e.getAttribute("class")==null)return false;
var allClass=e.getAttribute("class").split(" ");
if(allClass.indexOf(v)!=-1){return true}else{return false}
}
//äºä»¶å§æ ç°å¨æè¦å¯¹id为demoçèç¹çå代çæ¥æclass testçèç¹è¿è¡çå¬
//æ·»å äºä»¶
document.getElementById("demo").addEventListener("click",function(e){
e=e||(typeof window.event=="undefined"?event:window.event);//è¿é对äºä»¶å¯¹è±¡è¿è¡äºä¸ä¸ªå
¼å®¹
var target=typeof e.srcElement=="undefined"? e.target: e.srcElement;
var path=getParentNode(target);
for(var i=0;i<path.length;i++){
if(hasClass(path[i],"test")){
clickTest.call(path[i],e);
}
}
function clickTest(e){
console.log("ä½ ç¹äºè¿ä¸ªèç¹");
console.log(e);
console.log(this);
}
});
document.getElementById("demo").innerHTML="<div class='test'><span>"+
"asdasd</span></div>"
</script>
</body>
</html>
å¯ä»¥çå°å½ææ§è¡domObj.innerHTML=xxxæ¶ææ¯æ²¡æ对class为testè¿è¡æ·»å äºä»¶ç ä½æ¯æç¹å»å®æ§è¡çå½æ°å°±æ¯clickTest
å
·ä½åçèªå·±ç代ç å§ æå°±ä¸è¯¦ç»è¯´äº