0
我只是想了解如何捕獲和冒泡工作。爲什麼冒泡不起作用
不幸的是,這段代碼只是在IE中工作,而不是在Firefox中工作。
當我點擊div3時,它只是停止there.it不冒泡身體元素。 有人可以啓發我。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<script type="text/javascript">
var addEvent = function(elem, event, func, capture){
if(typeof(window.event) != 'undefined'){
elem.attachEvent('on' + event, func);
}
else{
elem.addEventListener(event, func, capture);
}
}
var bodyFunc = function(){
alert('In element body')
}
var div1Func = function(){
alert('In element div1')
}
var div2Func = function(){
alert('In element div2')
}
var div3Func = function(){
alert('In element div3')
}
var init = function(){
addEvent(document.getElementsByTagName('body')[0], 'click', bodyFunc, true);
addEvent(document.getElementById('div1'), 'click', div1Func, true);
addEvent(document.getElementById('div2'), 'click', div2Func, true);
addEvent(document.getElementById('div3'), 'click', div3Func, true);
}
addEvent(window, 'load', init, false)
</script>
</head>
<body>
<h1>Using the Modern Event Model</h1>
<div id="div1" style="border:1px solid #000000;padding:10pt;background:cornsilk">
<p>This is div 1</p>
<div id="div2" style="border:1px solid #000000;padding:10pt;background:gray">
<p>This is div 2</p>
<div id="div3" style="border:1px solid #000000;padding:10pt; background:lightBlue">
<p>This is div 3</p>
</div>
</div>
</div>
</body>
</html>
我不確定你到底在看什麼,但是當我在FF3.6中打開頁面並點擊div3時,我看到了我期望的內容:「在元素體中」,然後「在元素div1中」然後「元素div2」,最後「元素div3」。 – RobertB 2010-12-29 22:41:45