在dom中事件是冒泡的形式到document对象上的,而srcElement一直指向的是当时发生事件的元素,只要一直选择这个元素的父亲元素,就可以匹配到你想要的元素了
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table id="test1">
<tbody>
<tr>
<td>click me (#test1)</td>
</tr>
</tbody>
</table>
<table id="test2">
<tbody>
<tr>
<td>click me (#test2)</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
document.onclick = function(e){
e = e || window.event;
src = e.target || e.srcElement;
var table = parents(src , 'table');//这样可以拿到当前点击的这个元素的table
var tr = parents(src , 'tr');//这样拿到当前点击的元素的父亲(tr);
alert(table.id);//table的id
}
//查找父节点
function parents(el , parentName){
var parent = el.parentNode;
if(!parent)return null;//如果根本就没有父节点,那么返回null
do{
if(parent.tagName.toLowerCase() == parentName.toLowerCase()){
//如果这个就是想要找的节点,就返回这个
//在jq的校验里还可以校验class名称和其它的属性校验等
//这个简化版就直接校验标签名称
return parent;
}
}while(parent = parent.parentNode);//递归一直查找父亲的父亲。。
return null;//如果没有找到,也返回null
}
</script>
</body>
</html>