0

ul要素でイベント委任を使用して、li要素のいずれかをクリックするとulにバブルアップできると思っただけです。これは、ul の event.target によってキャプチャされ、適切な li 要素が取得され、必要に応じて処理が進められます。これが私が学んだ方法です。しかし、contact li 要素をクリックしても、期待どおりにアラートが表示されません。これで私を助けてください。私の会社は、イベントの委任を使用するように強制しています。だからこそ、これはとても重要です。

HTML

<!doctype html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css" >
<script src="JavaScript.js"></script>
</head>
<body>
<div>
<ul id="nav">
            <li id="click"><a href="#">Contact</a></li>
            <li> <a href="#">Blog</a></li>
            <li> <a href="#">Work</a></li>
            <li> <a href="#">About</a></li>
            <li> <a href="#">Home</a></li>
</ul>
</div>
</body>
</html>

JS

var list = document.getElementById("nav");
list.addEventListener("click", function(event) {
switch(event.target.id) {
case "click":
alert("haha");
break;
}, false);

CSS

body {
margin: 0;
}
#nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#nav li {
    width: 20%;
    float: left;
    text-align: center;
    display: inline;
}
#nav li a {
line-height: 40px;
    display: block;
    padding: 0.5em 5px;
    text-decoration: none;
    font-weight: bold;
    color: #F2F2F2;
    -webkit-box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
    box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
}
#nav a:link, #nav a:visited {
    background-color: #071726;
}
#nav a:hover, #nav a:active, #nav a:focus {
    background-color: #326773;
}
4

1 に答える 1

2

あなたの主な問題は、イベント ハンドラーに構文エラーがあること}ですswitch。(一貫したインデントを使用すると、この種のエラーを回避するのに役立ちます。)

あなたの問題は、それevent.targetがあなたが思っているものではないということです。event.targetクリックされた実際の要素です。あなたの場合のオッズは、クリックされた実際の要素がa要素（リンク）であるということです。

したがって、クリックした要素からクリックをフックした要素 ( になります) までの系列を調べて、必要なレベル (この場合は): Livethisにあるものを探します。例| ソースli

var list = document.getElementById("nav");
list.addEventListener("click", function(event) {
    // Start with the element that was clicked
    var li = event.target;

    // You may want `event.preventDefault();` here

    // If the element exists, it isn't the list on which we hooked
    // the event, and its tag name isn't LI, go to the parent
    // element instead.
    while (li && li !== this && li.tagName.toUpperCase() !== "LI") {
        li = li.parentNode;
    }

    // If we got an LI, use it
    if (li) {
        // OR you may want `event.preventDefault();` here
        switch(li.id) {
            case "click":
                alert("haha");
                // OR you may want `event.preventDefault();` here
                break;
        }
    }
}, false);

また、上記のコードがHTML のナビゲーション リストの下scriptの要素か、ハンドラーのいずれかにあることを確認してください (前者をお勧めします。スクリプトを最後に置くだけです)。onload

そして最後に: リンクhrefは単なる"#"であるため、実際にはブラウザーがリンクをたどることを望んでいないと思います (ページの上部までスクロールするため)。その場合はevent.preventDefault()、ハンドラーに呼び出しを追加する必要があります。上記のいくつかの場所で、リンクがたどられないようにするか、特定の場合にのみリンクをたどらないようにするかによって異なります。

補足: もちろん、この作業を自分で行うこともできますが、jQuery、YUI、Closure、または他のいくつかのいずれかのような優れたライブラリを使用して、他の人の作業を再利用できます。たとえば、jQuery では次のようになります。

$("#nav").on("click", "li", function(event) {
    // Possibly with `event.preventDefault();` here
    switch (this.id) {
        case "click":
            alert("haha");
            // OR possibly with `event.preventDefault();` here
            break;
    }
});

他のライブラリにも同様の機能があります。

于 2013-10-20T08:54:15.483 に答える