on.Click事件未触发简单代码

Question

click事件使用“ addEventListener”触发。 该脚本位于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内没有文本，因此页面上没有用户可以单击的内容，因此不会将click事件调度到该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>

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可解决您的问题，并按预期触发click事件。

但是，在处理JavaScript中的事件时，不仅要了解正确的语法，还需要了解更多。 为了不使事情复杂化，并且为了简洁起见，在JavaScript中定义点击事件有三种常用方法。

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

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

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

Demo()

我首先提到这种方法，只是为了演示构造代码库的不同方法。 这种功能更强大的方法并不是什么新鲜事物，它是“最佳实践”的基石。 调试问题很容易，就像遇到将代码干净地分开一样。 与您最初采用的更加内联的方法相比，使用这种方法继续扩展代码库总是非常容易的。

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

会产生一个正确执行的click事件，可以从中使用该事件。 这种方法的缺点是直接在HTML中声明了JS方法。

使用本机全局事件处理程序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的事件顺序优先级如何，如何仍然调用我们的函数表达式示例。 这证明了在代码库中使用更多模块化方法是一个好主意的另一个原因。

最后一点，当您打算使用没有相应URL的HREF时，始终提供#而不是空格。

on.Click事件未触发简单代码

问题描述

3 个解决方案

解决方案1
2 2018-04-13 04:04:29

解决方案2
1 2018-04-13 04:03:26

解决方案3
0 2018-04-13 05:00:41

on.Click事件未触发简单代码

问题描述

3 个解决方案

解决方案1 2 2018-04-13 04:04:29

解决方案2 1 2018-04-13 04:03:26

解决方案3 0 2018-04-13 05:00:41

解决方案1
2 2018-04-13 04:04:29

解决方案2
1 2018-04-13 04:03:26

解决方案3
0 2018-04-13 05:00:41