0

我只是想我可以在 ul 元素上使用事件委托，以便单击任何 li 元素都会冒泡到 ul。然后由 ul 的 event.target 捕获以获取正确的 li 元素并根据我对 li 的需要进行处理。这就是我学习的方式。但是单击联系人 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元素（链接）。

因此，您要做的是查看从单击的元素到您钩住单击的元素（将是this）的沿袭，寻找处于您想要的级别的元素（在您的情况下为 an ）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 回答