点击事件通过“addEventListener”触发。该脚本放置在 body 标记内的所有代码之后。我缺少什么
fiddle 链接 - https://jsfiddle.net/3280bw2L/3/
<body>
<nav>
<div class="container"><a class="logo">Timer</a>
<div class="icon"><a href="" id="bar" type="button"><i class="fas fa-bars"></i></a></div>
<ul class="menu" id="menu">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Services</a></li>
<li><a href="">Pages</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</nav>
<script type="text/javascript" src="JS/script.js"></script>
</body>
</html>
var x = document.getElementById("bar");
var y = document.getElementById("menu");
document.getElementById("bar").onClick = function (){
alert("working");
}
x.addEventListener("click", function() {
alert("works");
});
最佳答案
您已将监听器附加到的 a 内没有任何文本，因此页面上没有用户可以点击的任何内容，从而导致点击 事件被分派(dispatch)到该a。另一个问题是它的容器 .icon 具有 display: none，因此无论如何都无法单击它。
删除display: none，并在a内放入一些文本。 (您还需要 preventDefault 以防止重定向)
https://jsfiddle.net/3280bw2L/11/
var x = document.getElementById("bar");
var y = document.getElementById("menu");
document.querySelector("#bar").onclick = function (e){
alert("working");
e.preventDefault();
}/*Navbar*/
.container{
margin: 0 7% 0 7%
}
.icon{
float: right;
color: #444473;
}
nav{
width: 100%;
background: white;
height: 60px;
padding-top: 30px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, .050);
}
nav .logo{
display: inline-block;
font-family: 'Gloria Hallelujah', cursive;
font-size: 2em;
color: #10C0D6;
}
.menu{
display: inline-block;
float: right;
}
.menu li{
list-style: none;
display: inline-block;
margin-right: 20px;
}
.menu li a{
text-decoration: none;
color: #444473;
text-transform: uppercase;
font-family: roboto;
font-weight: 500;
font-size: 0.9em;
}
/*Media queries*/
@media only screen and (max-width: 768px){
.menu{
display: none;
}
.icon{
display: block;
}
.menu.responsive{
display: block;
width: 100%;
}
} <nav>
<div class="container"><a class="logo">Timer</a>
<div class="icon"><a href="" id="bar" type="button"><i class="fas fa-bars">text</i></a></div>
<ul class="menu" id="menu">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Services</a></li>
<li><a href="">Pages</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</nav>关于javascript - on.Click 事件不会在简单代码上触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49809096/