RT，多个有onclick事件的tag套在一起怎么click的时候只触发最顶层tag的事件？
比如下面这个例子，点击内层tag时会同时触发两个事件，即会分别执行foo2和foo1。
但我需要点击内层tag时就只触发foo2，而不触发foo1怎么办？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
</head>
<body>
<div onclick="foo1()" style="width:600px;height:100px;background-color:#CCC;">
<div onclick="foo2()" style="width:100px;height:50px;background-color:#666;"></div>
</div>
<script>
function foo1()
{
alert("1");
}
function foo2()
{
alert("2");
}
</script>
</body>
</html>
我试了一下发现用stopPropagation()可以做到
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
</head>
<body>
<div onclick="foo1()" style="width:600px;height:100px;background-color:#CCC;">
<div id="innerTag" style="width:100px;height:50px;background-color:#666;"></div>
</div>
<script>
function foo1()
{
alert("1");
}
document.getElementById("innerTag").onclick=function(event) {
event.stopPropagation();
alert("2");
}
</script>
</body>
</html>
但问题是我不能这么写，因为我那些tag都没有id，也不好怎么编id，而且也太多，感觉一个一个这样添加事件效率会有问题。
所以问一下怎么直接写到tag的onclick属性里啊？
或者说有什么别的方法吗？
设计的有问题
