Question

点击事件会以＆＃39; addEventListener＆＃39;触发。该脚本放在body标签内的所有代码之后。我错过了什么

小提琴链接 - 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");
    });

Answer 1

您已将a附加到收件人的内容中没有任何文字，因此网页上没有任何内容可供用户点击，从而导致{{1}将事件分派到click。另一个问题是它的容器a有.icon，因此无论如何都无法点击它。

删除display: none，并在display: none内放置一些文字。（您还希望a阻止重定向）

https://jsfiddle.net/3280bw2L/11/

＆＃13;

preventDefault

＆＃13;

var x = document.getElementById("bar");
var y = document.getElementById("menu");

document.querySelector("#bar").onclick = function (e){
	alert("working");
  e.preventDefault();
}

＆＃13;

/*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%;
	}
}

＆＃13;

Answer 2

您应该为元素添加一个事件监听器，使其适用于点击事件

document.getElementById("bar").addEventListener('click',function (){
    alert("working");
});

Answer 3

你很亲密。我无法让你的JSFiddle正确运行，所以我设置了一个快速的Codepen（链接：https://codepen.io/DaneTheory/pen/XEwpwe）。请随意参考它以查看下面发布的代码的工作示例以及其他注释。

首先，经过一些重构后，这是你的代码，以帮助更好地解决正在发生的事情：

<强> HTML

<body>
  <nav>
    <div class="container">
      <a class="logo">Timer</a>
      <div class="icon">
        <a href="#" id="bar" type="button" onclick="foobar()">
          <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>

JavaScript

var Demo = function() {
  var x = document.getElementById("bar")
  x.addEventListener("click", function() {
    console.log('Exmaple 1: Function Expression')
  })
}

Demo()


// foobar() will run as expected while the code block below it is 
// commented out. Uncomment the click event snippet and see foobar() no 
// longer is called. Instead, precendence is given to the global 
// .onclick event handler.

function foobar() {
  console.log('Example 2: Inline function')
}

// document.getElementById("bar").onclick = function(event) {  
//    console.log('Example 3: Global Click Event Handler')
// }

解决方案/解释

快速回答，您的.onClick功能写得不正确。将其更改为.onclick可以解决您的问题，并按预期触发点击事件。

但是，在JavaScript中处理事件时，了解正确的语法非常重要。在没有过于复杂化的情况下，为简洁起见，在JavaScript中定义点击事件有三种常用方法。

在函数表达式中定义click事件，其他方式称为闭包。这提供了一种干净，易于重用的方法来封装代码。

var Demo = function() {
  var x = document.getElementById("bar")
  x.addEventListener("click", function() {
    console.log('Exmaple 1: Function Expression')
  })
}

上面的代码片段演示了在函数表达式中封装click事件的一种方法。要运行函数表达式，只需像调用任何其他函数一样调用该方法：

Demo()

我首先提到这种方法，只是为了演示构建代码库的不同方法。这种更具功能性的方法并不是什么新鲜事，而且是“最佳实践”的基石。调试问题更简单，就像你遇到代码干净利落一样。使用此方法继续扩展代码库与使用最初的内联方法相比，总是非常容易。

将click事件定义为内联函数。这与您的原始方法类似，但有一些注意事项可以通过直接在按钮图标的HTML（因此名称为内联函数）中添加onclick="foobar()"来证明。 HTML中声明的内联函数将触发具有相应名称的函数。因此，将onclick="foobar()"添加到按钮图标，然后编写以下内容：
```
function foobar() {
  console.log('Example 2: Inline function')
} 
```

将生成正确执行的点击事件。这种方法的缺点是直接在HTML中声明了JS方法。

使用本机Global Event Handler API语法定义click事件。此示例与您的原始尝试最匹配。这是快速参考的代码：
```
document.getElementById("bar").onclick = function(event) {  
    console.log('Example 3: Global Click Event Handler')
}
```

.onclick是本机事件处理程序，因此优先顺序执行。使用这种方法，如提供的代码集中所示，在示例2中讨论的内联函数之前执行。它还将保留示例2中提到的内联函数全部开火。在代码库中使用本机Web API往往是一个不错的选择，因为它们是浏览器本身的本机事件。有关详细信息，请结帐：https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick
但是，请注意，在Codepen中，无论Web API的事件顺序优先级如何，仍然会调用函数表达式示例。这说明了为什么在代码库中使用更模块化的方法是个好主意的另一个原因。

作为最后一点，任何时候您打算使用没有相应网址的HREF，都会提供#而不是空格。

on.Click事件不会触发简单的代码

3 个答案: