console 命令行工具 X clear

console

var all = document.getElementsByTagName("*");
for (var i = 0; i < all.length; i++) {
      //监听用户鼠标,当移动到元素上时
      //为元素加上红色边框
      all[i].onmouseover = function(e) {
           this.style.border="1px solid red";
           stopBubble(e);
       }
      //检查用户鼠标,当移开元素时
      //删除我们加上的边框
      all[i].onmouseout = function(e) {
           this.style.border = "1px solid #EEE";
           stopBubble(e);
      }
}
function stopBubble(e) {
	var e = e ? e : window.event;
	if (window.event) { // IE
		e.cancelBubble = true; 
	} else { // FF
		//e.preventDefault(); 
		e.stopPropagation(); 
	} 
}

<body onclick="alert('Body Click');">
这是顶层Body
<div onclick="alert('Div 1 Click');">
 这是第1层
 <div onclick="alert('Div 2A Click');">这是第2层A
	<input type="button" onclick="alert('Button Click');stopBubble(event)" value="点击测试时间冒泡(阻止)！" />
 </div>
 <div onclick="alert('Div 2B Click');">这是第2层B
	<input type="button" onclick="alert('Button Click');" value="点击测试时间冒泡(未阻止)！" />
 </div>
</div>
 
 </body>

div {padding:10px; border:1px solid #EEE;margin:10px;}