Question

我只是认为我可以在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;
}

Answer 1

您的主要问题是您的事件处理程序中存在语法错误，您错过了}的{{1}}。（使用一致的缩进将有助于避免这些错误。）

然后你的问题是switch不是你想象的那样。 event.target是被点击的实际元素。您的案例中的几率是被点击的实际元素是event.target元素（链接）。

所以你要做的是查看从被点击的元素到你点击点击的元素（将是a）的谱系，寻找你所需要的那个元素（在您的情况下，this）：Live Example | Source

li

另外，请确保上面的代码位于HTML中的导航列表中的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);元素下方，或者script处理程序中（我推荐前者），只需将脚本放在最后）。

最后：由于链接的onload只是href，我猜你实际上并不希望浏览器跟随该链接（因为它会滚动到顶部这页纸）。如果是这种情况，您将需要在处理程序中添加对"#"的调用。我已经注意到您可能需要它的上面几个位置，这取决于您总是是否希望阻止链接被跟踪，或仅在某些情况下。

旁注：虽然您当然可以自己完成这项工作，但您可以使用jQuery，YUI，Closure等良好的库来重复使用他人的作品。 any of several others。例如，在jQuery中，看起来像这样：

event.preventDefault()

其他图书馆也有类似的功能。

JavaScript事件委派未按预期工作

1 个答案: