Javascript 打开。单击事件不触发简单代码_Javascript

Javascript 打开。单击事件不触发简单代码

javascript

Javascript 打开。单击事件不触发简单代码,javascript,Javascript,单击事件将触发“addEventListener”。脚本放在body标记中的所有代码之后。我错过了什么提琴链- var x=document.getElementById（“bar”）； var y=document.getElementById（“菜单”）； document.getElementById（“bar”）.onClick=function（）{ 警惕（“工作”）； } x、 addEventListener（“单击”，函数（）{ 警惕（“工作”）； }); 您应

单击事件将触发“addEventListener”。脚本放在body标记中的所有代码之后。我错过了什么

提琴链-









var x=document.getElementById（“bar”）；
var y=document.getElementById（“菜单”）；
document.getElementById（“bar”）.onClick=function（）{
警惕（“工作”）；
}
x、 addEventListener（“单击”，函数（）{
警惕（“工作”）；
});

您应该向元素中添加一个事件侦听器，以使其适用于单击事件

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

您应该向元素添加一个事件侦听器，以使其适用于单击事件

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

中没有您将侦听器附加到的文本，因此页面上没有任何用户可以单击的内容会导致

click

事件被发送到该

。另一个问题是它的容器

.icon

，具有

显示：none

，因此无论如何都无法单击它

移除

显示：无

，并在

中放入一些文本。（您还需要

preventDefault

来防止重定向）

var x=document.getElementById（“bar”）；
var y=document.getElementById（“菜单”）；
document.querySelector（“#bar”）.onclick=function（e）{
警惕（“工作”）；
e、 预防默认值（）；
}

/*导航栏*/
.集装箱{
利润率：0.7%0.7%
}
.图标{
浮动：对；
颜色：#444473；
}
导航{
宽度：100%；
背景：白色；
高度：60px；
填充顶部：30px；
盒影：2px2p4pRGBA（0,0,0,050）；
}
导航标志{
显示：内联块；
字体系列：“Gloria Halleujah”，草书；
字号：2em；
颜色：#10C0D6；
}
.菜单{
显示：内联块；
浮动：对；
}
李先生{
列表样式：无；
显示：内联块；
右边距：20px；
}
.菜单李a{
文字装饰：无；
颜色：#444473；
文本转换：大写；
字体系列：roboto；
字号：500；
字号：0.9em；
}
/*媒体查询*/
@仅介质屏幕和（最大宽度：768px）{
.菜单{
显示：无；
}
.图标{
显示：块；
}
.菜单{
显示：块；
宽度：100%；
}
}

您将侦听器附加到的

中没有文本，因此页面上没有用户可以单击的内容会导致

click

事件发送到该

。另一个问题是它的容器

.icon

，具有

显示：none

，因此无论如何都无法单击它

移除

显示：无

，并在

中放入一些文本。（您还需要

preventDefault

来防止重定向）

var x=document.getElementById（“bar”）；
var y=document.getElementById（“菜单”）；
document.querySelector（“#bar”）.onclick=function（e）{
警惕（“工作”）；
e、 预防默认值（）；
}

/*导航栏*/
.集装箱{
利润率：0.7%0.7%
}
.图标{
浮动：对；
颜色：#444473；
}
导航{
宽度：100%；
背景：白色；
高度：60px；
填充顶部：30px；
盒影：2px2p4pRGBA（0,0,0,050）；
}
导航标志{
显示：内联块；
字体系列：“Gloria Halleujah”，草书；
字号：2em；
颜色：#10C0D6；
}
.菜单{
显示：内联块；
浮动：对；
}
李先生{
列表样式：无；
显示：内联块；
右边距：20px；
}
.菜单李a{
文字装饰：无；
颜色：#444473；
文本转换：大写；
字体系列：roboto；
字号：500；
字号：0.9em；
}
/*媒体查询*/
@仅介质屏幕和（最大宽度：768px）{
.菜单{
显示：无；
}
.图标{
显示：块；
}
.菜单{
显示：块；
宽度：100%；
}
}

你很接近。我无法让您的JSFIDLE正确运行，所以我设置了一个快速代码笔（链接：）。请随意参考它，查看下面发布的代码的工作示例以及其他注释

首先，这里是经过一点重构后的代码，以帮助更好地解释发生了什么：

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>

解决方案/解释

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中定义点击事件有三种常用方法

在函数表达式中定义单击事件，也就是闭包。这提供了一种干净、易于重用的方法来封装代码

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

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

Demo()

我首先提到这个方法，只是为了演示构建代码库的不同方法。这种功能性更强的方法并不是什么新鲜事，它是“最佳实践”的基石。调试问题更简单，比如您遇到了代码完全分离的问题。与最初采用的内联方法相比，使用这种方法继续扩展代码库总是非常容易的

将单击事件定义为内联函数

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

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