Question

我只是想了解捕捉和冒泡的工作方式。

不幸的是，这段代码只能在IE中运行，而不能在firefox中运行。

当我点击div3时，它就会停在那里。它不会向身体元素冒出来。有人可以启发我。

<!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>

Answer 1

我不确定你到底看到了什么，但是当我在Win7上的FF3.6中打开页面并点击div 3时，我看到了我所期望的：“在元素体中”，然后是div1，然后是div2最后div3。换句话说，我在捕获顺序时看到警报。

你在IE浏览器中看到冒泡，因为AFAIK，IE只冒泡，从不捕捉。

你应该看到在FF中捕获，因为你通过传递“true”作为4个addEvent调用的最后一个参数来告诉事件在捕获模式下监听。将这四个改为“假”，你会看到冒泡的顺序。

为什么打气不起作用

1 个答案: