<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{
100px;
height: 50px;
background-color: red;
}
li{
float: left;
}
</style>
</head>
<body>
<ul onclick="u()" id="u">
<span>aaaaaaaaaaaaaa</span>
<li>aaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaa</li>
<li>aaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaaa</li>
<span>aaaaaaaaaaaaaa</span>
<P id="1" onclick="n()">aaaaaaaaaaaa</P>
</ul>
<script type="text/javascript">
function u(){
alert('uuuuuuuuuuuuuuu');
}
var ul = document.getElementById('u');
var li = document.getElementById('u').getElementsByTagName('li');
ul.onclick = function (event){
var e = event || window.event,
source = e.target || e.srcElement;
console.log(source);
/*if (source.nodeName.toLowerCase() == "li") {
};*/
}
function n(e){
stopPropagation(e);
}
function stopPropagation(e) {
if (window.event) {
window.event.cancelBubble = true;
}else{
e.stopPropagation();
}
}
function addElement(){
var li = document.createElement('li');
li.innerHTML="新元素";
li.setAttribute('id', 1);
ul.appendChild(li);
}
addElement();
</script>
</body>
</html>