JAVAscript——菜单下拉列表练习(阻止事件冒泡)

下拉列表框，鼠标点击文本框，出现下拉，鼠标(离开的时候或者点击网页其他位置时)下拉列表消失。鼠标放到下拉列表的某一项上变背景色，点击下拉列表的某一项将该项的值显示在文本框内，然后下拉列表消失。

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#a
{
    80px;
    height:30px;
    background-color:#CFF;
    text-align:center;
    line-height:30px;
    vertical-align:middle;
}
#b
{
    80px;
    height:180px;
    background-color:#CF9;
    text-align:center;
    line-height:30px;
    vertical-align:middle;
}
#b div
{
    text-align:center;
    line-height:30px;
    vertical-align:middle;
}
</style>
</head>
<body>
<div id="q" onclick="wai()">
<input id="a" value="菜单" onclick="caidan()" onmouseout="likai()"/>
    <div id="b" style="display:none" >
        <div id="c" onmouseover="over(this)" onmouseout="out(this)" onclick="dianji(this)">苹果</div>
        <div id="d" onmouseover="over(this)" onmouseout="out(this)" onclick="dianji(this)">梨子</div>
        <div id="e" onmouseover="over(this)" onmouseout="out(this)" onclick="dianji(this)">山竹</div>
        <div id="f" onmouseover="over(this)" onmouseout="out(this)" onclick="dianji(this)">桃子</div>
        <div id="g" onmouseover="over(this)" onmouseout="out(this)" onclick="dianji(this)">核桃</div>
        <div id="h" onmouseover="over(this)" onmouseout="out(this)" onclick="dianji(this)">香蕉</div>
    </div>
</div>
</body>
<script type="text/javascript">

function caidan(b)
{
    document.getElementById("b").style.display="block";    
    stopEventBubble(event); //阻止事件冒泡
}

function over(t)
{
    t.style.backgroundColor="gray";    
}
function out(y)
{
    y.style.backgroundColor="#CF9";    
}
//传值，把下拉列表的值传到文本框中
function dianji(m)
{
    var n=document.getElementById("a");
    n.value = m.innerText;
}
//阻止事件冒泡函数
function stopEventBubble(event)
{
        var e=event || window.event;

        if (e && e.stopPropagation)
        {
            e.stopPropagation();    
        }
        else
        {
            e.cancelBubble=true;
        }
    }
//隐藏
function wai()
{
    document.getElementById("b").style.display="none";    
}
</script>
</html>

阻止事件冒泡

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<div id="wai" style="100%; height:800px;" onclick="showb()" >
    <div id="nei" style="200px; height:200px; background-color:#096;" onclick="showa()"></div>
    <div id="aa" style="200px; height:200px; background-color:#C36; display:none"></div>
</div>
</body>
<script type="text/javascript">
//显示
function showa()
{
    document.getElementById("aa").style.display="block"
    stopEventBubble(event); //阻止事件冒泡
}
//阻止事件冒泡函数
function stopEventBubble(event)
{
        var e=event || window.event;

        if (e && e.stopPropagation)
        {
            e.stopPropagation();    
        }
        else
        {
            e.cancelBubble=true;
        }
    }
//隐藏
function showb()
{
    document.getElementById("aa").style.display="none"

}


</script>
</html>