WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:DOMによるイベントで下位要素でmouseoutイベントが反応

0:[投稿] ゆり [2007/07/07 07:02 ] [環境:Firefox2 Apache]

早速質問させていただきます。

タイトルの通り、下記のスクリプトでmouseoverイベントは
正常に反応するのですが、mouseoutイベントが
A要素が記述してあるLI要素内でも反応してしまいます。

何か解決策はないでしょうか?
イベントについては、「addEventListener」で発生させたいと
思っております。

宜しくお願いいたします。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS" />
<style type="text/css">
#nav li {
    list-style-type: none;
    float: left;
}
#nav li a {
    display: block;
    padding: 5px 10px;
    width: 138px;
    height: 16px;
}
#nav li ul {
    display: none;
    border: #333333 1px solid;
    position: absolute;
    background-color: #ffffff;
}
#nav ul a:hover {
    color: #ffffff;
    background-color: #669acc;
}
#nav li.test ul {
    display: block;
    left: 50px;
    position: absolute;
}
</style>
<script type="text/javascript">
<!--
window.onload = function() {
    var oNav = document.getElementById('nav');
    oNav.addEventListener('mouseover', evtover, false);
    oNav.addEventListener('mouseout', evtout, false);
}
function evtover(evt) {
    var oTar = evt.target.parentNode;
    oTar.className = 'test';
}
function evtout(evt) {
    var oTar = evt.target.parentNode;
    oTar.className = '';
}
// -->
</script>
<title></title>
</head>
<body>
<ul id="nav">
<li><a href="javascript:void(0)">メイン項目</a>
    <ul>
        <li style="border: #333333 1px solid;">
            <div class="menucat1">メイン項目</div>
            <div class="sublist">
                <a href="">リンク項目1</a>
            </div>
        </li>
        <li>
            <div class="menucat1">メイン項目</div>
            <div class="sublist">
                <a href="">リンク項目1</a>
                <a href="">リンク項目2</a>
                <a href="">リンク項目3</a>
            </div>
        </li>
    </ul>
</li>
<li><a href="javascript:void(0)">メイン項目</a>
    <ul>
        <li>
            <div class="menucat1">メイン</div>
            <div class="sublist">
                <a href="">リンク1</a>
            </div>
        </li>
        <li>
            <div class="menucat1">メイン</div>
            <div class="sublist">
                <a href="">リンク1</a>
                <a href="">リンク2</a>
                <a href="">リンク3</a>
            </div>
        </li>
    </ul>
</li>
</ul>
</body>
</html>

回答(必須): 状態:

お名前(必須):

URL:




[戻る]